@tactics/toddle-styleguide 5.0.2 → 5.0.5

package/src/utilities/toddle-datetime/interfaces/toddle-datetime.interface.d.ts

@@ -0,0 +1,22 @@
+import { ConversionAccuracy } from '../types/toddle-datetime.type';
+export interface LocaleOptions {
+    /**
+     *  @default system's locale
+     */
+    locale?: string | undefined;
+}
+export interface DateTimeOptions extends LocaleOptions {
+    /**
+     * Use this zone if no offset is specified in the input string itself. Will also convert the time to this zone.
+     * @default local
+     */
+    zone?: string | undefined;
+    /**
+     * Override the zone with a fixed-offset zone specified in the string itself, if it specifies one.
+     * @default false
+     */
+    setZone?: boolean | undefined;
+}
+export interface DiffOptions {
+    conversionAccuracy?: ConversionAccuracy | undefined;
+}

package/src/utilities/toddle-datetime/interfaces/toddle-datetime.interface.tsx

@@ -0,0 +1,25 @@
+import {ConversionAccuracy} from '../types/toddle-datetime.type';
+
+export interface LocaleOptions {
+  /**
+   *  @default system's locale
+   */
+  locale?: string | undefined;
+}
+
+export interface DateTimeOptions extends LocaleOptions {
+  /**
+   * Use this zone if no offset is specified in the input string itself. Will also convert the time to this zone.
+   * @default local
+   */
+  zone?: string | undefined;
+  /**
+   * Override the zone with a fixed-offset zone specified in the string itself, if it specifies one.
+   * @default false
+   */
+  setZone?: boolean | undefined;
+}
+
+export interface DiffOptions {
+  conversionAccuracy?: ConversionAccuracy | undefined;
+}

package/src/utilities/toddle-datetime/toddle-datetime.class.d.ts

@@ -0,0 +1,50 @@
+import { Duration as LuxonDuration } from 'luxon';
+import { LocaleOptions, DateTimeOptions, DiffOptions } from './interfaces/toddle-datetime.interface';
+import { DurationLike, DurationUnits } from './types/duration.type';
+import { DateTimeFormatOptions, DateTimeJSOptions, DateTimeUnit } from './types/toddle-datetime.type';
+import { DurationObjectUnits } from './interfaces/duration.interface';
+export declare class Duration {
+    private duration;
+    constructor(duration: LuxonDuration);
+    toObject(): DurationObjectUnits;
+}
+export declare class ToddleDateTime {
+    private dateTime;
+    private constructor();
+    /**
+     * Create a ToddleDateTime for the current instant, in the system's time zone.
+     *
+     * Use Settings to override these default values if needed.
+     * @example
+     * ToddleDateTime.now().toISO() //~> now in the ISO format
+     */
+    static now(): ToddleDateTime;
+    static local(opts?: DateTimeJSOptions): ToddleDateTime;
+    static local(year: number, opts?: DateTimeJSOptions): ToddleDateTime;
+    static local(year: number, month: number, opts?: DateTimeJSOptions): ToddleDateTime;
+    static local(year: number, month: number, day: number, opts?: DateTimeJSOptions): ToddleDateTime;
+    static local(year: number, month: number, day: number, hour: number, opts?: DateTimeJSOptions): ToddleDateTime;
+    static local(year: number, month: number, day: number, hour: number, minute: number, opts?: DateTimeJSOptions): ToddleDateTime;
+    static local(year: number, month: number, day: number, hour: number, minute: number, second: number, opts?: DateTimeJSOptions): ToddleDateTime;
+    static local(year: number, month: number, day: number, hour: number, minute: number, second: number, milliseconds: number, opts?: DateTimeJSOptions): ToddleDateTime;
+    static fromISO(date: string, options?: DateTimeOptions): ToddleDateTime;
+    static fromSeconds(seconds: number, options?: DateTimeJSOptions): ToddleDateTime;
+    static get DATE_MED(): DateTimeFormatOptions;
+    get hour(): number;
+    get minute(): number;
+    get second(): number;
+    get millisecond(): number;
+    get day(): number;
+    get weekdayShort(): string;
+    plus(duration: DurationLike): ToddleDateTime;
+    minus(duration: DurationLike): ToddleDateTime;
+    startOf(unit: DateTimeUnit): ToddleDateTime;
+    endOf(unit: DateTimeUnit): ToddleDateTime;
+    toFormat(format: string, options?: LocaleOptions): string;
+    toISO(): string | null;
+    toISODate(): string | null;
+    toString(): string;
+    toLocaleString(formatOptions?: DateTimeFormatOptions, options?: LocaleOptions): string;
+    timestamp(): number;
+    diff(otherDateTime: ToddleDateTime, unit?: DurationUnits, options?: DiffOptions): Duration;
+}

package/src/utilities/toddle-datetime/toddle-datetime.class.tsx

@@ -0,0 +1,206 @@
+import {DateTime as LuxonDateTime, Duration as LuxonDuration} from 'luxon';
+
+import {
+  LocaleOptions,
+  DateTimeOptions,
+  DiffOptions,
+} from './interfaces/toddle-datetime.interface';
+
+import {DurationLike, DurationUnits} from './types/duration.type';
+import {
+  DateTimeFormatOptions,
+  DateTimeJSOptions,
+  DateTimeUnit,
+} from './types/toddle-datetime.type';
+import {DurationObjectUnits} from './interfaces/duration.interface';
+
+export class Duration {
+  private duration: LuxonDuration;
+
+  constructor(duration: LuxonDuration) {
+    this.duration = duration;
+  }
+
+  toObject(): DurationObjectUnits {
+    return this.duration.toObject();
+  }
+}
+
+export class ToddleDateTime {
+  private dateTime: LuxonDateTime;
+
+  private constructor(dateTime?: LuxonDateTime) {
+    this.dateTime = dateTime || LuxonDateTime.local();
+  }
+
+  // STATIC MEMBERS
+  /**
+   * Create a ToddleDateTime for the current instant, in the system's time zone.
+   *
+   * Use Settings to override these default values if needed.
+   * @example
+   * ToddleDateTime.now().toISO() //~> now in the ISO format
+   */
+  static now(): ToddleDateTime {
+    return new ToddleDateTime(LuxonDateTime.local());
+  }
+
+  static local(opts?: DateTimeJSOptions): ToddleDateTime;
+  static local(year: number, opts?: DateTimeJSOptions): ToddleDateTime;
+  static local(
+    year: number,
+    month: number,
+    opts?: DateTimeJSOptions
+  ): ToddleDateTime;
+  static local(
+    year: number,
+    month: number,
+    day: number,
+    opts?: DateTimeJSOptions
+  ): ToddleDateTime;
+  static local(
+    year: number,
+    month: number,
+    day: number,
+    hour: number,
+    opts?: DateTimeJSOptions
+  ): ToddleDateTime;
+  static local(
+    year: number,
+    month: number,
+    day: number,
+    hour: number,
+    minute: number,
+    opts?: DateTimeJSOptions
+  ): ToddleDateTime;
+  static local(
+    year: number,
+    month: number,
+    day: number,
+    hour: number,
+    minute: number,
+    second: number,
+    opts?: DateTimeJSOptions
+  ): ToddleDateTime;
+  static local(
+    year: number,
+    month: number,
+    day: number,
+    hour: number,
+    minute: number,
+    second: number,
+    milliseconds: number,
+    opts?: DateTimeJSOptions
+  ): ToddleDateTime;
+  static local(...args: any[]): ToddleDateTime {
+    const dateTime = LuxonDateTime.local(...args);
+    return new ToddleDateTime(dateTime);
+  }
+
+  static fromISO(date: string, options?: DateTimeOptions): ToddleDateTime {
+    return new ToddleDateTime(LuxonDateTime.fromISO(date, options));
+  }
+
+  static fromSeconds(
+    seconds: number,
+    options?: DateTimeJSOptions
+  ): ToddleDateTime {
+    return new ToddleDateTime(LuxonDateTime.fromSeconds(seconds, options));
+  }
+
+  // FORMAT PRESETS
+
+  static get DATE_MED(): DateTimeFormatOptions {
+    return LuxonDateTime.DATE_MED;
+  }
+
+  // GET
+
+  get hour(): number {
+    return this.dateTime.hour;
+  }
+
+  get minute(): number {
+    return this.dateTime.minute;
+  }
+
+  get second(): number {
+    return this.dateTime.second;
+  }
+
+  get millisecond(): number {
+    return this.dateTime.millisecond;
+  }
+
+  get day(): number {
+    return this.dateTime.day;
+  }
+
+  get weekdayShort(): string {
+    return this.dateTime.toFormat('EEE');
+  }
+
+  // TRANSFORM
+
+  plus(duration: DurationLike): ToddleDateTime {
+    return new ToddleDateTime(this.dateTime.plus(duration));
+  }
+
+  minus(duration: DurationLike): ToddleDateTime {
+    return new ToddleDateTime(this.dateTime.minus(duration));
+  }
+
+  startOf(unit: DateTimeUnit): ToddleDateTime {
+    this.dateTime = this.dateTime.startOf(unit);
+    return this;
+  }
+
+  endOf(unit: DateTimeUnit): ToddleDateTime {
+    this.dateTime = this.dateTime.endOf(unit);
+    return this;
+  }
+
+  // OUTPUT
+
+  toFormat(format: string, options?: LocaleOptions): string {
+    return this.dateTime.toFormat(format, options);
+  }
+
+  toISO(): string | null {
+    return this.dateTime.toISO();
+  }
+
+  toISODate(): string | null {
+    return this.dateTime.toISODate();
+  }
+
+  toString(): string {
+    return this.dateTime.toString();
+  }
+
+  toLocaleString(
+    formatOptions?: DateTimeFormatOptions,
+    options?: LocaleOptions
+  ): string {
+    return this.dateTime.toLocaleString(formatOptions, options);
+  }
+
+  timestamp(): number {
+    return this.dateTime.toUnixInteger();
+  }
+
+  // COMPARE
+
+  diff(
+    otherDateTime: ToddleDateTime,
+    unit?: DurationUnits,
+    options?: DiffOptions
+  ): Duration {
+    const luxonDuration = this.dateTime.diff(
+      otherDateTime.dateTime,
+      unit,
+      options
+    );
+    return new Duration(luxonDuration);
+  }
+}

package/src/utilities/toddle-datetime/toddle-datetime.preview.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ToddleDateTimePreview: ({}: {}) => React.JSX.Element;

package/src/utilities/toddle-datetime/toddle-datetime.preview.tsx

@@ -0,0 +1,160 @@
+import React from 'react';
+import {ToddleDateTime} from './toddle-datetime.class';
+import {ScrollView, View} from 'react-native';
+import {Paragraph} from '../../components/atoms/paragraph-components';
+import {Heading2, Heading4} from '../../components/atoms/heading-components';
+
+export const ToddleDateTimePreview = ({}: {}) => {
+  const now = ToddleDateTime.now();
+  const fromISO = ToddleDateTime.fromISO('2016-05-25T09:08:34.123');
+  const timestamp = 1688729520;
+
+  return (
+    <View
+      style={{
+        marginTop: 24,
+        alignContent: 'center',
+        justifyContent: 'center',
+        paddingBottom: 100,
+      }}
+    >
+      <Heading2 bold={true} textAlign={'center'} addStyle={{marginBottom: 50}}>
+        ToddleDateTime
+      </Heading2>
+      <Heading4 addStyle={{paddingHorizontal: 16, marginBottom: 24}}>
+        ToddleDateTime is a wrapper around Luxon, and provides less
+        functionality. This can and or will expand through time. You can find
+        the implemented methods below:
+      </Heading4>
+      <ScrollView contentContainerStyle={{padding: 16}}>
+        <Heading4 bold={true}>.now()</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          Create a DateTime for the current instant, in the system's time zone.
+        </Paragraph>
+
+        <Heading4 bold={true}>
+          .fromISO(date: string, options?: DateTimeOptions)
+        </Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          Create a ToddleDateTime from an ISO 8601 string
+        </Paragraph>
+
+        <Heading4 bold={true}>.local()</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          Create a local ToddleDateTime
+        </Paragraph>
+
+        <Heading4 bold={true}>.timestamp()</Heading4>
+        <Paragraph>
+          Returns the epoch milliseconds of this ToddleDateTime.
+        </Paragraph>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          {fromISO.timestamp()}
+        </Paragraph>
+
+        <Heading4 bold={true}>.fromSeconds(seconds, options?)</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          Create a ToddleDateTime from a number of seconds since the epoch
+          (meaning since 1 January 1970 00:00:00 UTC). Uses the default zone.
+        </Paragraph>
+
+        <Heading4 bold={true}>.DATE_MED()</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          ToddleDateTime.toLocaleString format like 'Oct 14, 1983'
+        </Paragraph>
+
+        <Heading4 bold={true}>.hour()</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          Get the hour of the day (0-23)
+        </Paragraph>
+
+        <Heading4 bold={true}>.minute()</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          Get the minute of the hour (0-59).
+        </Paragraph>
+
+        <Heading4 bold={true}>.second()</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          Get the second of the minute (0-59).
+        </Paragraph>
+
+        <Heading4 bold={true}>.millisecond()</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          Get the millisecond of the second (0-999).
+        </Paragraph>
+
+        <Heading4 bold={true}>.day()</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          Get the day of the month (1-30ish).
+        </Paragraph>
+
+        <Heading4 bold={true}>.weekdayShort()</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          Get the human readable short weekday, such as 'Mon'. Defaults to the
+          system's locale if no locale has been specified
+        </Paragraph>
+
+        <Heading4 bold={true}>.plus(duration)</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          {`Adding hours, minutes, seconds, or milliseconds increases the timestamp by the right number of milliseconds. Adding days, months, or years shifts the calendar, accounting for DSTs and leap years along the way. Thus, dt.plus({ hours: 24 }) may result in a different time than dt.plus({ days: 1 }) if there's a DST shift in between.`}
+        </Paragraph>
+
+        <Heading4 bold={true}>.minus(duration)</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          See ToddleDateTime plus()
+        </Paragraph>
+
+        <Heading4 bold={true}>.startOf(unit)</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          "Set" this ToddleDateTime to the beginning of the given unit.
+        </Paragraph>
+
+        <Heading4 bold={true}>.endOf(unit)</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          "Set" this ToddleDateTime to the end (meaning the last millisecond) of
+          a unit of time
+        </Paragraph>
+
+        <Heading4 bold={true}>.toFormat(format, options?)</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          Returns a string representation of this ToddleDateTime formatted
+          according to the specified format string.
+        </Paragraph>
+
+        <Heading4 bold={true}>.toISO()</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          Returns an ISO 8601-compliant string representation of this
+          ToddleDateTime
+        </Paragraph>
+
+        <Heading4 bold={true}>.toISODate()</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          Returns an ISO 8601-compliant string representation of this
+          ToddleDateTime's date component
+        </Paragraph>
+
+        <Heading4 bold={true}>.toString()</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          Returns a string representation of this DateTime appropriate for
+          debugging
+        </Paragraph>
+
+        <Heading4 bold={true}>
+          .toLocaleString(formatOptions?, options?)
+        </Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          Returns a localized string representing this date.
+        </Paragraph>
+
+        <Heading4 bold={true}>.timestamp()</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          Returns the epoch seconds (as a whole number) of this ToddleDateTime.{' '}
+        </Paragraph>
+        <Heading4 bold={true}>.diff(otherDateTime, unit?, options?)</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          Return the difference between two ToddleDateTimes as a Duration.
+        </Paragraph>
+      </ScrollView>
+    </View>
+  );
+};

package/src/utilities/toddle-datetime/toddle-datetime.test.js

@@ -0,0 +1,127 @@
+import {DateTime as LuxonDateTime} from 'luxon';
+import {ToddleDateTime} from './toddle-datetime.class';
+
+describe('ToddleDateTime static members', () => {
+  it('now() returns an instance of ToddleDateTime', () => {
+    expect(ToddleDateTime.now()).toBeInstanceOf(ToddleDateTime);
+  });
+
+  it('fromISO() returns an instance of ToddleDateTime', () => {
+    const date = '2022-01-01T00:00:00.000-07:00';
+    expect(ToddleDateTime.fromISO(date)).toBeInstanceOf(ToddleDateTime);
+  });
+
+  it('fromISO() parses ISO date correctly', () => {
+    const date = '2022-01-01T00:00:00.000-07:00';
+    const toddleDateTime = ToddleDateTime.fromISO(date);
+    const luxonDateTime = LuxonDateTime.fromISO(date);
+    expect(toddleDateTime.toISODate()).toEqual(luxonDateTime.toISODate());
+  });
+
+  it('fromSeconds() returns an instance of ToddleDateTime', () => {
+    const timestamp = 1688729520;
+    expect(ToddleDateTime.fromSeconds(timestamp)).toBeInstanceOf(
+      ToddleDateTime
+    );
+    const toddleDateTime = ToddleDateTime.fromSeconds(timestamp);
+    const luxonDateTime = LuxonDateTime.fromSeconds(timestamp);
+    expect(toddleDateTime.toISO()).toEqual(luxonDateTime.toISO());
+  });
+});
+
+describe('ToddleDateTime FORMAT PRESETS', () => {
+  const date = '2022-01-01T00:00:00.000-07:00';
+  const luxonDateMed = LuxonDateTime.now(date).toLocaleString(
+    LuxonDateTime.DATE_MED
+  );
+  const toddleDateMed = ToddleDateTime.now(date).toLocaleString(
+    ToddleDateTime.DATE_MED
+  );
+  expect(toddleDateMed).toMatch(luxonDateMed);
+});
+
+describe('ToddleDateTime GET methods', () => {
+  let dateTime;
+  let luxonDateTime = LuxonDateTime.local();
+
+  beforeEach(() => {
+    dateTime = new ToddleDateTime(luxonDateTime);
+  });
+
+  it('day returns the day of the month', () => {
+    expect(dateTime.day).toEqual(luxonDateTime.day);
+  });
+
+  it('weekdayShort returns the short weekday name', () => {
+    expect(dateTime.weekdayShort).toEqual(luxonDateTime.weekdayShort);
+  });
+});
+
+describe('ToddleDateTime TRANSFORM methods', () => {
+  let dateTime;
+  const luxonDateTime = LuxonDateTime.local();
+
+  beforeEach(() => {
+    dateTime = new ToddleDateTime(luxonDateTime);
+  });
+
+  it('plus() adds a duration to the date time', () => {
+    const duration = {days: 7};
+    const newDateTime = dateTime.plus(duration);
+    expect(newDateTime.day).toEqual(luxonDateTime.plus(duration).day);
+  });
+
+  it('minus() subtracts a duration from the date time', () => {
+    const duration = {days: 7};
+    const newDateTime = dateTime.minus(duration);
+    expect(newDateTime.day).toEqual(luxonDateTime.minus(duration).day);
+  });
+
+  it('startOf() changes the date time to the start of a unit', () => {
+    dateTime.startOf('month');
+    expect(dateTime.day).toEqual(1);
+  });
+
+  it('endOf() changes the date time to the end of a unit', () => {
+    dateTime.endOf('year');
+    expect(dateTime.day).toEqual(31);
+  });
+});
+
+describe('ToddleDateTime OUTPUT methods', () => {
+  let dateTime;
+
+  beforeEach(() => {
+    dateTime = ToddleDateTime.now('30-01-2023');
+  });
+
+  it('toFormat() formats the date time according to the provided format string', () => {
+    const formattedDate = dateTime.toFormat('yyyy-MM-dd');
+    expect(formattedDate).toMatch(dateTime.toFormat('yyyy-MM-dd'));
+  });
+
+  it('toISO() formats the date time in ISO format', () => {
+    const formattedDate = dateTime.toISO();
+    expect(formattedDate).toMatch(dateTime.toISO());
+  });
+
+  it('toISODate() formats the date time in ISO date format', () => {
+    const formattedDate = dateTime.toISODate();
+    expect(formattedDate).toMatch(dateTime.toISODate());
+  });
+
+  it('toString() formats the date time as a string', () => {
+    const stringDate = dateTime.toString();
+    expect(stringDate).toMatch(dateTime.toString());
+  });
+
+  it('toLocaleString() formats the date time as a locale string', () => {
+    const localeString = dateTime.toLocaleString();
+    expect(localeString).toMatch(dateTime.toLocaleString());
+  });
+
+  it('timestamp formats the time to a number', () => {
+    const timestamp = dateTime.timestamp();
+    expect(timestamp).toEqual(dateTime.timestamp());
+  });
+});

package/src/utilities/toddle-datetime/types/duration.type.d.ts

@@ -0,0 +1,4 @@
+import { DurationLikeObject } from '../interfaces/duration.interface';
+export type DurationUnit = keyof DurationLikeObject;
+export type DurationUnits = DurationUnit | DurationUnit[];
+export type DurationLike = DurationLikeObject | number;

package/src/utilities/toddle-datetime/types/duration.type.tsx

@@ -0,0 +1,6 @@
+import {DurationLikeObject} from '../interfaces/duration.interface';
+
+export type DurationUnit = keyof DurationLikeObject;
+export type DurationUnits = DurationUnit | DurationUnit[];
+
+export type DurationLike = DurationLikeObject | number;

package/src/utilities/toddle-datetime/types/toddle-datetime.type.d.ts

@@ -0,0 +1,5 @@
+import { DateTimeOptions } from '../interfaces/toddle-datetime.interface';
+export type DateTimeFormatOptions = Intl.DateTimeFormatOptions;
+export type DateTimeUnit = 'year' | 'quarter' | 'month' | 'week' | 'day' | 'hour' | 'minute' | 'second' | 'millisecond';
+export type DateTimeJSOptions = Omit<DateTimeOptions, 'setZone'>;
+export type ConversionAccuracy = 'casual' | 'longterm';

package/src/utilities/toddle-datetime/types/toddle-datetime.type.tsx

@@ -0,0 +1,23 @@
+import {
+  DateTimeOptions,
+  LocaleOptions,
+} from '../interfaces/toddle-datetime.interface';
+import {CanBeInvalid} from 'luxon/src/_util';
+import {_ToObjectOutput} from 'luxon';
+
+export type DateTimeFormatOptions = Intl.DateTimeFormatOptions;
+
+export type DateTimeUnit =
+  | 'year'
+  | 'quarter'
+  | 'month'
+  | 'week'
+  | 'day'
+  | 'hour'
+  | 'minute'
+  | 'second'
+  | 'millisecond';
+
+export type DateTimeJSOptions = Omit<DateTimeOptions, 'setZone'>;
+
+export type ConversionAccuracy = 'casual' | 'longterm';

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "jsx": "react",
+    "strict": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "target": "ES5",
+    "noImplicitAny": false
+  },
+  "typeRoots": ["./types"]
+}

package/types/src/components/atoms/avatar/avatar.component.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { ImageSourcePropType } from 'react-native';
+import { Size } from '../../../types/size.enum';
+import { Initials } from '../../../models/initials.model';
+declare type AvatarProps = {
+    source: ImageSourcePropType | Initials;
+    size: Size;
+    isBlocked?: boolean;
+};
+declare const Avatar: React.FC<AvatarProps>;
+export { Avatar as Avatar };