@brickclay-org/ui 0.0.58 → 0.0.60

package/index.d.ts

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { OnInit, OnDestroy, OnChanges, EventEmitter, SimpleChanges, AfterViewInit, QueryList, ElementRef, ComponentRef, Type, InjectionToken, Renderer2, ApplicationRef, EnvironmentInjector } from '@angular/core';
+import { OnInit, OnDestroy, OnChanges, EventEmitter, ElementRef, SimpleChanges, AfterViewInit, QueryList, ComponentRef, Type, InjectionToken, Renderer2, ApplicationRef, EnvironmentInjector, ChangeDetectorRef } from '@angular/core';
+import { ControlValueAccessor, NgControl, NgModel, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
 import * as rxjs from 'rxjs';
 import { Observable } from 'rxjs';
 import * as i1 from '@angular/common';
-import { ControlValueAccessor, NgControl, NgModel } from '@angular/forms';
 import { CdkDragDrop, CdkDragMove, CdkDragStart } from '@angular/cdk/drag-drop';
 import * as i1$2 from '@angular/cdk/dialog';
 import { CdkDialogContainer, DialogRef } from '@angular/cdk/dialog';
@@ -49,12 +49,16 @@ interface CalendarRange {
     start: Date;
     end: Date;
 }
-interface CalendarSelection {
+declare class CalendarSelection {
     startDate: string | null;
     endDate: string | null;
+    /** Start time in 12-hour format with AM/PM (e.g. "1:00 AM"). */
+    startTime: string | null;
+    /** End time in 12-hour format with AM/PM (e.g. "2:00 AM"). */
+    endTime: string | null;
     selectedDates?: string[];
 }
-declare class BkCustomCalendar implements OnInit, OnDestroy, OnChanges {
+declare class BkCustomCalendar implements OnInit, OnDestroy, OnChanges, ControlValueAccessor {
     private calendarManager;
     enableTimepicker: boolean;
     autoApply: boolean;
@@ -79,17 +83,35 @@ declare class BkCustomCalendar implements OnInit, OnDestroy, OnChanges {
     placeholder: string;
     opens: 'left' | 'right' | 'center';
     inline: boolean;
+    appendToBody: boolean;
     isDisplayCrossIcon: boolean;
+    hasError: boolean;
+    errorMessage: string;
     selected: EventEmitter<CalendarSelection>;
+    inputWrapper: ElementRef<HTMLDivElement>;
+    /** Used when appendToBody is true to position the popup in viewport coordinates */
+    dropdownStyle: {
+        top?: string;
+        bottom?: string;
+        left?: string;
+    };
     opened: EventEmitter<void>;
     closed: EventEmitter<void>;
+    showCancelApply: boolean;
     /**
-     * External value passed from parent. If provided, component will select these dates on init / change.
-     * Accepts { startDate: Date|null, endDate: Date|null, selectedDates?: Date[] }
+     * External value passed from parent / ngModel. When used with ngModel, this is the bound value.
+     * Accepts { startDate: string|null, endDate: string|null, selectedDates?: string[] }
      */
     selectedValue: CalendarSelection | null;
     /** Optional display format for the input value. Uses moment formatting tokens. */
     displayFormat: string;
+    /** When true, the control is required (used with ngModel for validation: dirty, touched, invalid). */
+    required: boolean;
+    /** CVA: called when form control value is set (e.g. ngModel binding) */
+    private onChange;
+    /** CVA: called when control is touched (blur / close) */
+    private onTouched;
+    disabled: boolean;
     brickclayIcons: {
         readonly arrowleft: "assets/icons/chevron-left.svg";
         readonly arrowRight: "assets/icons/chevron-right.svg";
@@ -136,6 +158,10 @@ declare class BkCustomCalendar implements OnInit, OnDestroy, OnChanges {
     endMinute: number;
     endSecond: number;
     endAMPM: 'AM' | 'PM';
+    /** Current start time string in 12-hour format with AM/PM (e.g. "1:00 AM"). Synced with ngModel/CalendarSelection. */
+    startTime: string | null;
+    /** Current end time string in 12-hour format with AM/PM (e.g. "2:00 AM"). Synced with ngModel/CalendarSelection. */
+    endTime: string | null;
     openTimePickerId: string | null;
     closePickerCounter: {
         [key: string]: number;
@@ -147,7 +173,18 @@ declare class BkCustomCalendar implements OnInit, OnDestroy, OnChanges {
     private closeAllSubscription?;
     private closeFn?;
     constructor(calendarManager: CalendarManagerService);
+    writeValue(value: CalendarSelection | null): void;
+    registerOnChange(fn: (value: CalendarSelection | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    /** Call from template when control loses focus (for CVA touched state). */
+    markAsTouched(): void;
+    /** Apply CalendarSelection to internal state (startDate, endDate, startTime, endTime, selectedDates, calendar view). */
+    private applyValueToState;
+    /** Format to "H:MM AM/PM" string. */
+    private formatTimeToAmPm;
     onClickOutside(event: MouseEvent): void;
+    onWindowEvents(): void;
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
@@ -155,6 +192,8 @@ declare class BkCustomCalendar implements OnInit, OnDestroy, OnChanges {
     initializeDefaultRanges(): void;
     initializeTimeFromDate(date: Date, isStart: boolean): void;
     toggle(): void;
+    /** Update popup position when appendToBody is true (fixed positioning relative to viewport). */
+    updatePosition(): void;
     close(): void;
     onDateHover(day: number | null, fromRight?: boolean): void;
     onDateLeave(): void;
@@ -220,7 +259,7 @@ declare class BkCustomCalendar implements OnInit, OnDestroy, OnChanges {
     formatAllMinuteInputs(): void;
     formatDateToString(date: Date): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<BkCustomCalendar, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BkCustomCalendar, "bk-custom-calendar", never, { "enableTimepicker": { "alias": "enableTimepicker"; "required": false; }; "autoApply": { "alias": "autoApply"; "required": false; }; "closeOnAutoApply": { "alias": "closeOnAutoApply"; "required": false; }; "showCancel": { "alias": "showCancel"; "required": false; }; "linkedCalendars": { "alias": "linkedCalendars"; "required": false; }; "singleDatePicker": { "alias": "singleDatePicker"; "required": false; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; }; "showISOWeekNumbers": { "alias": "showISOWeekNumbers"; "required": false; }; "customRangeDirection": { "alias": "customRangeDirection"; "required": false; }; "lockStartDate": { "alias": "lockStartDate"; "required": false; }; "position": { "alias": "position"; "required": false; }; "drop": { "alias": "drop"; "required": false; }; "dualCalendar": { "alias": "dualCalendar"; "required": false; }; "showRanges": { "alias": "showRanges"; "required": false; }; "timeFormat": { "alias": "timeFormat"; "required": false; }; "enableSeconds": { "alias": "enableSeconds"; "required": false; }; "customRanges": { "alias": "customRanges"; "required": false; }; "multiDateSelection": { "alias": "multiDateSelection"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "opens": { "alias": "opens"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "isDisplayCrossIcon": { "alias": "isDisplayCrossIcon"; "required": false; }; "selectedValue": { "alias": "selectedValue"; "required": false; }; "displayFormat": { "alias": "displayFormat"; "required": false; }; "startDate": { "alias": "startDate"; "required": false; }; "endDate": { "alias": "endDate"; "required": false; }; }, { "selected": "selected"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BkCustomCalendar, "bk-custom-calendar", never, { "enableTimepicker": { "alias": "enableTimepicker"; "required": false; }; "autoApply": { "alias": "autoApply"; "required": false; }; "closeOnAutoApply": { "alias": "closeOnAutoApply"; "required": false; }; "showCancel": { "alias": "showCancel"; "required": false; }; "linkedCalendars": { "alias": "linkedCalendars"; "required": false; }; "singleDatePicker": { "alias": "singleDatePicker"; "required": false; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; }; "showISOWeekNumbers": { "alias": "showISOWeekNumbers"; "required": false; }; "customRangeDirection": { "alias": "customRangeDirection"; "required": false; }; "lockStartDate": { "alias": "lockStartDate"; "required": false; }; "position": { "alias": "position"; "required": false; }; "drop": { "alias": "drop"; "required": false; }; "dualCalendar": { "alias": "dualCalendar"; "required": false; }; "showRanges": { "alias": "showRanges"; "required": false; }; "timeFormat": { "alias": "timeFormat"; "required": false; }; "enableSeconds": { "alias": "enableSeconds"; "required": false; }; "customRanges": { "alias": "customRanges"; "required": false; }; "multiDateSelection": { "alias": "multiDateSelection"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "opens": { "alias": "opens"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "appendToBody": { "alias": "appendToBody"; "required": false; }; "isDisplayCrossIcon": { "alias": "isDisplayCrossIcon"; "required": false; }; "hasError": { "alias": "hasError"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "showCancelApply": { "alias": "showCancelApply"; "required": false; }; "selectedValue": { "alias": "selectedValue"; "required": false; }; "displayFormat": { "alias": "displayFormat"; "required": false; }; "required": { "alias": "required"; "required": false; }; }, { "selected": "selected"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
 }
 
 interface TimeConfiguration {
@@ -646,7 +685,7 @@ declare class BkSelect implements ControlValueAccessor {
     disabled: i0.ModelSignal<boolean>;
     loading: i0.InputSignal<boolean>;
     closeOnSelect: i0.InputSignal<boolean>;
-    dropdownPosition: i0.InputSignal<"top" | "bottom">;
+    dropdownPosition: i0.InputSignal<"bottom" | "top">;
     hasError: boolean;
     errorMessage: string;
     appendToBody: i0.InputSignal<boolean>;
@@ -717,6 +756,7 @@ declare class BkSelect implements ControlValueAccessor {
         items: any[];
     }[]>;
     resolveColor(item: any): string | null;
+    getRemainingItems(): string[] | [];
     static ɵfac: i0.ɵɵFactoryDeclaration<BkSelect, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BkSelect, "bk-select", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "bindLabel": { "alias": "bindLabel"; "required": false; "isSignal": true; }; "bindValue": { "alias": "bindValue"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "notFoundText": { "alias": "notFoundText"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "clearAllText": { "alias": "clearAllText"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "colorKey": { "alias": "colorKey"; "required": false; "isSignal": true; }; "iconAlt": { "alias": "iconAlt"; "required": false; }; "label": { "alias": "label"; "required": false; }; "required": { "alias": "required"; "required": false; }; "iconSrc": { "alias": "iconSrc"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "maxLabels": { "alias": "maxLabels"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "allSelect": { "alias": "allSelect"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "dropdownPosition": { "alias": "dropdownPosition"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "appendToBody": { "alias": "appendToBody"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "open": "open"; "close": "close"; "focus": "focus"; "blur": "blur"; "search": "search"; "clear": "clear"; "change": "change"; "scrollToEnd": "scrollToEnd"; }, never, never, true, never>;
 }
@@ -1553,14 +1593,14 @@ declare class BkValidator implements OnInit {
     static ɵcmp: i0.ɵɵComponentDeclaration<BkValidator, "bk-validator", never, { "control": { "alias": "control"; "required": false; }; "label": { "alias": "label"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "showError": { "alias": "showError"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
-type AvatarFallback = 'auto' | 'initials' | 'icon' | 'camera';
-declare class AvatarProfile implements OnDestroy, ControlValueAccessor {
+type BkAvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+type BkAvatarFallback = 'auto' | 'initials' | 'icon' | 'camera';
+declare class BkAvatarProfile implements OnDestroy, ControlValueAccessor, Validator {
     src: string | null;
     alt: string;
     name: string;
-    size: AvatarSize;
-    fallback: AvatarFallback;
+    size: BkAvatarSize;
+    fallback: BkAvatarFallback;
     /** Whether upload / remove actions are enabled */
     editable: boolean;
     /** Accepted file MIME types for the file picker */
@@ -1602,6 +1642,7 @@ declare class AvatarProfile implements OnDestroy, ControlValueAccessor {
     registerOnChange(fn: (value: string | null) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
+    validate(control: AbstractControl): ValidationErrors | null;
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     onImageError(): void;
@@ -1609,7 +1650,7 @@ declare class AvatarProfile implements OnDestroy, ControlValueAccessor {
     get displaySrc(): string | null;
     get showInitials(): boolean;
     get containerClasses(): string;
-    get sizeClasses(): AvatarSize[];
+    get sizeClasses(): BkAvatarSize[];
     get showRemoveButton(): boolean;
     onFileSelected(event: Event): void;
     /**
@@ -1622,8 +1663,8 @@ declare class AvatarProfile implements OnDestroy, ControlValueAccessor {
     private revokePreview;
     private isFileTypeValid;
     private getInitials;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AvatarProfile, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarProfile, "bk-avatar-profile", never, { "src": { "alias": "src"; "required": false; }; "alt": { "alias": "alt"; "required": false; }; "name": { "alias": "name"; "required": false; }; "size": { "alias": "size"; "required": false; }; "fallback": { "alias": "fallback"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "maxFileSizeKB": { "alias": "maxFileSizeKB"; "required": false; }; "uploadLabel": { "alias": "uploadLabel"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "label": { "alias": "label"; "required": false; }; "required": { "alias": "required"; "required": false; }; "hasError": { "alias": "hasError"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "fileSelected": "fileSelected"; "removed": "removed"; "fileError": "fileError"; }, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BkAvatarProfile, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BkAvatarProfile, "bk-avatar-profile", never, { "src": { "alias": "src"; "required": false; }; "alt": { "alias": "alt"; "required": false; }; "name": { "alias": "name"; "required": false; }; "size": { "alias": "size"; "required": false; }; "fallback": { "alias": "fallback"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "maxFileSizeKB": { "alias": "maxFileSizeKB"; "required": false; }; "uploadLabel": { "alias": "uploadLabel"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "label": { "alias": "label"; "required": false; }; "required": { "alias": "required"; "required": false; }; "hasError": { "alias": "hasError"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "fileSelected": "fileSelected"; "removed": "removed"; "fileError": "fileError"; }, never, never, true, never>;
 }
 
 /** Generic hierarchical node; works with note types and any similar tree. */
@@ -1804,5 +1845,47 @@ declare class BkToastr {
     static ɵcmp: i0.ɵɵComponentDeclaration<BkToastr, "bk-toastr", never, {}, {}, never, never, true, never>;
 }
 
-export { AvatarProfile, BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BkBadge, BkButton, BkButtonGroup, BkCheckbox, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkValidator, BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule, getDialogBackdropAnimation, getDialogPanelAnimation };
-export type { AvatarFallback, AvatarSize, BadgeColor, BadgeSize, BadgeVariant, BkAnimationKeyframes, BkDialogAnimation, BkDialogConfig, BkDialogPosition, BkInputAutoCapitalize, BkInputAutoComplete, BkInputMode, BkInputType, BkTextAreaAutoCapitalize, BkTextAreaAutoComplete, BkTextAreaInputMode, ButtonSize, ButtonVariant, CalendarRange, CalendarSelection, CountryOption, GroupItem, GroupMode, HierarchicalNode, IconButtonSize, IconButtonVariant, IconOrientation, PillColor, PillSize, PillVariant, ScheduledDateSelection, SortDirection, SpinnerSize, TabItem, TableAction, TableColumn, TimeConfiguration, ToastConfig, ToastMessage, ToastMethodOptions, ToastPosition, ToastSeverity };
+type AvatarSize = 'xsm' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+type AvatarVariant = 'gray' | 'colored';
+type DotStatus = 'active' | 'inactive' | 'notification' | 'none';
+type DotPosition = 'bottom-right' | 'top-left';
+type AvatarFallback = 'auto' | 'initials' | 'icon';
+declare class BkUiAvatar implements OnChanges, ControlValueAccessor {
+    private cdr;
+    constructor(cdr: ChangeDetectorRef);
+    src: string | null;
+    alt: string;
+    name: string;
+    size: AvatarSize;
+    variant: AvatarVariant;
+    fallback: AvatarFallback;
+    dot: DotStatus;
+    dotPosition: DotPosition;
+    /** Emits when the provided image URL fails to load */
+    imageLoadError: EventEmitter<void>;
+    initials: string;
+    imageLoadFailed: boolean;
+    private onChange;
+    private onTouched;
+    /**
+     * Called by the forms system when the model value changes (ngModel / formControl).
+     * Sets the src directly and tells OnPush to re-check the template.
+     */
+    writeValue(value: string | null): void;
+    registerOnChange(fn: (value: string | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(_isDisabled: boolean): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    onImageError(): void;
+    get showImage(): boolean;
+    get showInitials(): boolean;
+    get showIcon(): boolean;
+    get containerClasses(): string;
+    get dotClasses(): string;
+    private getInitials;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BkUiAvatar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BkUiAvatar, "bk-ui-avatar", never, { "src": { "alias": "src"; "required": false; }; "alt": { "alias": "alt"; "required": false; }; "name": { "alias": "name"; "required": false; }; "size": { "alias": "size"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "fallback": { "alias": "fallback"; "required": false; }; "dot": { "alias": "dot"; "required": false; }; "dotPosition": { "alias": "dotPosition"; "required": false; }; }, { "imageLoadError": "imageLoadError"; }, never, never, true, never>;
+}
+
+export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BkAvatarProfile, BkBadge, BkButton, BkButtonGroup, BkCheckbox, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkUiAvatar, BkValidator, BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule, CalendarSelection, getDialogBackdropAnimation, getDialogPanelAnimation };
+export type { AvatarFallback, AvatarSize, AvatarVariant, BadgeColor, BadgeSize, BadgeVariant, BkAnimationKeyframes, BkAvatarFallback, BkAvatarSize, BkDialogAnimation, BkDialogConfig, BkDialogPosition, BkInputAutoCapitalize, BkInputAutoComplete, BkInputMode, BkInputType, BkTextAreaAutoCapitalize, BkTextAreaAutoComplete, BkTextAreaInputMode, ButtonSize, ButtonVariant, CalendarRange, CountryOption, DotPosition, DotStatus, GroupItem, GroupMode, HierarchicalNode, IconButtonSize, IconButtonVariant, IconOrientation, PillColor, PillSize, PillVariant, ScheduledDateSelection, SortDirection, SpinnerSize, TabItem, TableAction, TableColumn, TimeConfiguration, ToastConfig, ToastMessage, ToastMethodOptions, ToastPosition, ToastSeverity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brickclay-org/ui",
-  "version": "0.0.58",
+  "version": "0.0.60",
   "schematics": "./schematics/collection.json",
   "ng-add": {
     "save": "dependencies"

package/src/lib/ui-avatar/ui-avatar.css

@@ -0,0 +1,71 @@
+/* =========================
+   Base Avatar
+========================= */
+.avatar {
+  @apply relative inline-flex items-center justify-center
+  rounded-full flex-shrink-0 select-none
+  transition-all duration-200;
+}
+
+.avatar-img {
+  @apply w-full h-full object-cover rounded-full;
+}
+
+.avatar-text {
+  @apply font-medium;
+}
+
+/* =========================
+   Sizes (container + text)
+========================= */
+.xsm { @apply size-6 text-[10px] leading-[14px]; }
+.sm  { @apply size-8 text-sm; }
+.md  { @apply size-10 text-base; }
+.lg  { @apply size-12 text-[18px] leading-[26px]; }
+.xl  { @apply size-14 text-xl; }
+.xxl { @apply size-16 text-xl; }
+
+/* =========================
+   Placeholder Icon Sizes
+========================= */
+.xsm .placeholder-icon { @apply size-4; }
+.sm  .placeholder-icon { @apply size-5; }
+.md  .placeholder-icon { @apply size-6; }
+.lg  .placeholder-icon { @apply size-7; }
+.xl  .placeholder-icon,
+.xxl .placeholder-icon { @apply size-8; }
+
+/* =========================
+   Status Dot (Base)
+========================= */
+.avatar-dot {
+  @apply absolute rounded-full block box-content
+  border-[1.5px] border-white;
+}
+
+/* Dot size follows avatar size */
+.xsm .avatar-dot { @apply size-1; }
+.sm  .avatar-dot { @apply size-1.5; }
+.md  .avatar-dot { @apply size-2.5; }
+.lg  .avatar-dot { @apply size-3; }
+.xl  .avatar-dot { @apply size-[14px]; }
+.xxl .avatar-dot { @apply size-4; }
+
+/* =========================
+   Dot Variants
+========================= */
+.active {
+  @apply bg-[#22973F];
+}
+
+.inactive {
+  @apply bg-gray-300;
+}
+
+.notification {
+  @apply bg-[#2E90FA];
+}
+
+.none {
+  @apply hidden;
+}

package/src/styles.css

@@ -19,3 +19,4 @@
 @import './lib/avatar-profile/avatar-profile.css';
 @import './lib/hierarchical-select/hierarchical-select.css';
 @import './lib/toastr/toastr.css';
+@import './lib/ui-avatar/ui-avatar.css'