@lesterarte/sefin-ui 0.0.6-dev.0 → 0.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lesterarte/sefin-ui",
-  "version": "0.0.6-dev.0",
+  "version": "0.0.7",
   "description": "Sefin Design System - A comprehensive Angular UI library based on Atomic Design and design tokens",
   "keywords": [
     "angular",
@@ -23,7 +23,6 @@
   },
   "dependencies": {
     "lucide": "^0.562.0",
-    "lucide-angular": "^0.562.0",
     "tslib": "^2.3.0"
   },
   "sideEffects": [

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

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Injector, AfterViewInit, OnChanges, ElementRef, SimpleChanges, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
+import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
 
 /**
  * Color design tokens as TypeScript constants
@@ -606,6 +606,7 @@ declare class AvatarComponent {
     get avatarClasses(): string;
     get displayInitials(): string;
     onImageError(event: Event): void;
+    get iconSize(): 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     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>;
 }
@@ -678,25 +679,6 @@ declare class IconComponent {
     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>;
 }
 
-/**
- * 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;
@@ -771,6 +753,8 @@ declare class TagComponent {
     variant: TagVariant;
     /** Tag size. Options: 'sm' | 'md' | 'lg' */
     size: TagSize;
+    /** Icon name to display before the tag content */
+    icon?: string;
     /** Whether the tag can be removed (shows remove button) */
     removable: boolean;
     /** Whether the tag is disabled */
@@ -781,8 +765,9 @@ declare class TagComponent {
     removed: EventEmitter<MouseEvent>;
     onRemove(event: MouseEvent): void;
     get tagClasses(): string;
+    get iconSize(): 'xs' | 'sm' | 'md';
     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>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TagComponent, "sefin-tag", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "icon": { "alias": "icon"; "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';
@@ -826,6 +811,22 @@ declare class StackComponent {
     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>;
 }
 
+type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+type ContainerVariant = 'default' | 'fluid' | 'fixed';
+declare class ContainerComponent {
+    /** Container size. Options: 'sm' | 'md' | 'lg' | 'xl' | 'full' */
+    size: ContainerSize;
+    /** Container variant. Options: 'default' | 'fluid' | 'fixed' */
+    variant: ContainerVariant;
+    /** Whether the container has padding */
+    padding: boolean;
+    /** Additional CSS classes */
+    class: string;
+    get containerClasses(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ContainerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ContainerComponent, "sefin-container", never, { "size": { "alias": "size"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "padding": { "alias": "padding"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
 declare class CheckboxComponent implements ControlValueAccessor, AfterViewInit, OnChanges {
     checkboxInput?: ElementRef<HTMLInputElement>;
     size: InputSize;
@@ -1068,7 +1069,9 @@ declare class AlertComponent {
     dismissed: EventEmitter<void>;
     onDismiss(): void;
     get alertClasses(): string;
-    get iconClass(): string;
+    get iconName(): string;
+    get iconSize(): 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    get iconColor(): 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>;
 }
@@ -1097,17 +1100,107 @@ declare class ToastComponent implements OnInit, OnDestroy {
     dismissed: EventEmitter<void>;
     isVisible: boolean;
     isExiting: boolean;
+    isPaused: boolean;
     private dismissTimeout?;
+    private remainingTime;
+    private startTime;
     constructor(cdr: ChangeDetectorRef);
     ngOnInit(): void;
     ngOnDestroy(): void;
+    private startTimer;
+    private clearTimer;
+    pauseTimer(): void;
+    resumeTimer(): void;
     dismiss(): void;
     get toastClasses(): string;
-    get iconClass(): string;
+    get iconName(): 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>;
 }
 
+type TextFieldVariant = 'outlined' | 'filled' | 'standard';
+type TextFieldSize = 'sm' | 'md' | 'lg';
+type TextFieldType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
+declare class TextFieldComponent implements ControlValueAccessor, Validator, OnInit, AfterViewInit, OnDestroy {
+    inputRef?: ElementRef<HTMLInputElement>;
+    /** TextField variant style. Options: 'outlined' | 'filled' | 'standard' */
+    variant: TextFieldVariant;
+    /** TextField size. Options: 'sm' | 'md' | 'lg' */
+    size: TextFieldSize;
+    /** Input type. Options: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local' */
+    type: TextFieldType;
+    /** Placeholder text */
+    placeholder: string;
+    /** Helper text shown below the input */
+    hint: string;
+    /** Error message to display */
+    errorMessage: string;
+    /** Whether the field is required */
+    required: boolean;
+    /** Whether the field is disabled */
+    disabled: boolean;
+    /** Whether the field is readonly */
+    readonly: boolean;
+    /** Maximum length of the input */
+    maxLength?: number;
+    /** Minimum length of the input */
+    minLength?: number;
+    /** Pattern for validation (regex string) */
+    pattern?: string;
+    /** Leading icon name */
+    leadingIcon?: string;
+    /** Trailing icon name */
+    trailingIcon?: string;
+    /** Whether to show character counter */
+    showCounter: boolean;
+    /** Autocomplete attribute */
+    autocomplete?: string;
+    /** Input name attribute */
+    name: string;
+    /** Input id attribute */
+    id: string;
+    /** Additional CSS classes */
+    class: string;
+    /** Custom validation function */
+    customValidator?: (value: string) => string | null;
+    /** Event emitted when the value changes */
+    valueChange: EventEmitter<string>;
+    /** Event emitted when the input is focused */
+    focused: EventEmitter<FocusEvent>;
+    /** Event emitted when the input is blurred */
+    blurred: EventEmitter<FocusEvent>;
+    /** Event emitted when trailing icon is clicked */
+    trailingIconClick: EventEmitter<MouseEvent>;
+    value: string;
+    isFocused: boolean;
+    hasError: boolean;
+    internalErrorMessage: string;
+    private onChange;
+    private onTouched;
+    private destroy$;
+    private control?;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    private generateIdIfNeeded;
+    onInput(event: Event): void;
+    onFocus(event: FocusEvent): void;
+    onBlur(event: FocusEvent): void;
+    onTrailingIconClick(event: MouseEvent): void;
+    private validateField;
+    get displayError(): boolean;
+    get displayErrorMessage(): string;
+    get characterCount(): number;
+    get textFieldClasses(): string;
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    validate(control: AbstractControl): ValidationErrors | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TextFieldComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TextFieldComponent, "sefin-textfield", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "type": { "alias": "type"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "minLength": { "alias": "minLength"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; }; "showCounter": { "alias": "showCounter"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "class": { "alias": "class"; "required": false; }; "customValidator": { "alias": "customValidator"; "required": false; }; }, { "valueChange": "valueChange"; "focused": "focused"; "blurred": "blurred"; "trailingIconClick": "trailingIconClick"; }, never, never, true, never>;
+}
+
 interface AutocompleteOption {
     value: string | number;
     label: string;
@@ -1152,5 +1245,5 @@ declare class AutocompleteComponent implements OnInit, OnDestroy, OnChanges {
 
 declare const STYLES_PATH = "./styles/index.scss";
 
-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 };
+export { AlertComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, ButtonComponent, COLOR_TOKENS, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DividerComponent, FabButtonComponent, IconButtonComponent, IconComponent, LIGHT_THEME, LinkComponent, ProgressBarComponent, RadioComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TagComponent, TextFieldComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent };
+export type { AlertSize, AlertVariant, AutocompleteOption, AvatarSize, BadgeSize, BadgeVariant, BaseComponent, BorderRadiusToken, ButtonSize, ButtonVariant, CardVariant, ChipSize, ChipVariant, ColorShade, ColorTokenName, ContainerSize, ContainerVariant, CustomTheme, DividerOrientation, DividerVariant, FabSize, IconSize, InputSize, LinkSize, LinkVariant, ProgressBarSize, ProgressBarVariant, SelectOption, ShadowToken, SpacingToken, SpinnerSize, SpinnerVariant, TagSize, TagVariant, TextFieldSize, TextFieldType, TextFieldVariant, Theme, ThemeColors, ToastPosition, ToastVariant, TooltipPosition, TooltipTrigger, TypographyColor, TypographyLineHeight, TypographySize, TypographyToken, TypographyVariant, TypographyWeight };