@tactics/toddle-styleguide 5.0.2 → 5.0.5

package/src/icons/solid/user-group/user-group.icon.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {HexColor} from '../../../models/hex-color.model';
+import {Scale} from '../../../theme/scale/index';
+
+export const UserGroupIcon = ({color, size = Scale.l}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 18" fill="none">
+      <Path
+        fill={color ? HexColor.of(color).toString() : context.colors.main['0']}
+        d="M13.3 3.90001C13.3 5.80539 11.8225 7.35001 9.99998 7.35001C8.17743 7.35001 6.69998 5.80539 6.69998 3.90001C6.69998 1.99463 8.17743 0.450012 9.99998 0.450012C11.8225 0.450012 13.3 1.99463 13.3 3.90001Z"
+      />
+      <Path
+        fill={color ? HexColor.of(color).toString() : context.colors.main['0']}
+        d="M18.8 6.20001C18.8 7.47027 17.815 8.50001 16.6 8.50001C15.3849 8.50001 14.4 7.47027 14.4 6.20001C14.4 4.92976 15.3849 3.90001 16.6 3.90001C17.815 3.90001 18.8 4.92976 18.8 6.20001Z"
+      />
+      <Path
+        fill={color ? HexColor.of(color).toString() : context.colors.main['0']}
+        d="M14.4 14.25C14.4 11.7095 12.43 9.65001 9.99998 9.65001C7.56992 9.65001 5.59998 11.7095 5.59998 14.25V17.7H14.4V14.25Z"
+      />
+      <Path
+        fill={color ? HexColor.of(color).toString() : context.colors.main['0']}
+        d="M5.59998 6.20001C5.59998 7.47027 4.615 8.50001 3.39998 8.50001C2.18495 8.50001 1.19998 7.47027 1.19998 6.20001C1.19998 4.92976 2.18495 3.90001 3.39998 3.90001C4.615 3.90001 5.59998 4.92976 5.59998 6.20001Z"
+      />
+      <Path
+        fill={color ? HexColor.of(color).toString() : context.colors.main['0']}
+        d="M16.6 17.7V14.25C16.6 13.0377 16.3009 11.8985 15.7758 10.9085C16.0392 10.8377 16.3154 10.8 16.6 10.8C18.4225 10.8 19.9 12.3446 19.9 14.25V17.7H16.6Z"
+      />
+      <Path
+        fill={color ? HexColor.of(color).toString() : context.colors.main['0']}
+        d="M4.22416 10.9085C3.69901 11.8985 3.39998 13.0377 3.39998 14.25V17.7H0.0999756V14.25C0.0999756 12.3446 1.57744 10.8 3.39998 10.8C3.68456 10.8 3.96072 10.8377 4.22416 10.9085Z"
+      />
+    </Svg>
+  );
+};
+
+<svg
+  width="20"
+  height="18"
+  viewBox="0 0 20 18"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M13.3 3.90001C13.3 5.80539 11.8225 7.35001 9.99998 7.35001C8.17743 7.35001 6.69998 5.80539 6.69998 3.90001C6.69998 1.99463 8.17743 0.450012 9.99998 0.450012C11.8225 0.450012 13.3 1.99463 13.3 3.90001Z"
+    fill="#515F6C"
+  />
+  <path
+    d="M18.8 6.20001C18.8 7.47027 17.815 8.50001 16.6 8.50001C15.3849 8.50001 14.4 7.47027 14.4 6.20001C14.4 4.92976 15.3849 3.90001 16.6 3.90001C17.815 3.90001 18.8 4.92976 18.8 6.20001Z"
+    fill="#515F6C"
+  />
+  <path
+    d="M14.4 14.25C14.4 11.7095 12.43 9.65001 9.99998 9.65001C7.56992 9.65001 5.59998 11.7095 5.59998 14.25V17.7H14.4V14.25Z"
+    fill="#515F6C"
+  />
+  <path
+    d="M5.59998 6.20001C5.59998 7.47027 4.615 8.50001 3.39998 8.50001C2.18495 8.50001 1.19998 7.47027 1.19998 6.20001C1.19998 4.92976 2.18495 3.90001 3.39998 3.90001C4.615 3.90001 5.59998 4.92976 5.59998 6.20001Z"
+    fill="#515F6C"
+  />
+  <path
+    d="M16.6 17.7V14.25C16.6 13.0377 16.3009 11.8985 15.7758 10.9085C16.0392 10.8377 16.3154 10.8 16.6 10.8C18.4225 10.8 19.9 12.3446 19.9 14.25V17.7H16.6Z"
+    fill="#515F6C"
+  />
+  <path
+    d="M4.22416 10.9085C3.69901 11.8985 3.39998 13.0377 3.39998 14.25V17.7H0.0999756V14.25C0.0999756 12.3446 1.57744 10.8 3.39998 10.8C3.68456 10.8 3.96072 10.8377 4.22416 10.9085Z"
+    fill="#515F6C"
+  />
+</svg>;

package/src/icons/solid/users/users-solid.icon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const UsersIcon: ({ color, size }: IconSVGProps) => React.JSX.Element;

package/src/icons/solid/users/users-solid.icon.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {HexColor} from '../../../models/hex-color.model';
+import {Scale} from '../../../theme/scale/index';
+
+export const UsersIcon = ({color, size = Scale.l}: IconSVGProps) => {
+  const Context = useContext(ThemeCtx);
+
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 17" fill="none">
+      <Path
+        fill={color ? HexColor.of(color).toString() : Context.colors.main['0']}
+        d="M8.89997 3.90001C8.89997 5.80539 7.42251 7.35001 5.59998 7.35001C3.77744 7.35001 2.29998 5.80539 2.29998 3.90001C2.29998 1.99463 3.77744 0.450012 5.59998 0.450012C7.42251 0.450012 8.89997 1.99463 8.89997 3.90001Z"
+      />
+      <Path
+        fill={color ? HexColor.of(color).toString() : Context.colors.main['0']}
+        d="M17.7 3.90001C17.7 5.80539 16.2225 7.35001 14.4 7.35001C12.5774 7.35001 11.1 5.80539 11.1 3.90001C11.1 1.99463 12.5774 0.450012 14.4 0.450012C16.2225 0.450012 17.7 1.99463 17.7 3.90001Z"
+      />
+      <Path
+        fill={color ? HexColor.of(color).toString() : Context.colors.main['0']}
+        d="M13.222 16.55C13.2734 16.1744 13.3 15.7905 13.3 15.4C13.3 13.5196 12.6833 11.7897 11.6497 10.4194C12.4587 9.93009 13.3981 9.65001 14.4 9.65001C17.4376 9.65001 19.9 12.2244 19.9 15.4V16.55H13.222Z"
+      />
+      <Path
+        fill={color ? HexColor.of(color).toString() : Context.colors.main['0']}
+        d="M5.59998 9.65001C8.63754 9.65001 11.1 12.2244 11.1 15.4V16.55H0.0999756V15.4C0.0999756 12.2244 2.56241 9.65001 5.59998 9.65001Z"
+      />
+    </Svg>
+  );
+};
+
+<svg
+  width="20"
+  height="17"
+  viewBox="0 0 20 17"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M8.89997 3.90001C8.89997 5.80539 7.42251 7.35001 5.59998 7.35001C3.77744 7.35001 2.29998 5.80539 2.29998 3.90001C2.29998 1.99463 3.77744 0.450012 5.59998 0.450012C7.42251 0.450012 8.89997 1.99463 8.89997 3.90001Z"
+    fill="#515F6C"
+  />
+  <path
+    d="M17.7 3.90001C17.7 5.80539 16.2225 7.35001 14.4 7.35001C12.5774 7.35001 11.1 5.80539 11.1 3.90001C11.1 1.99463 12.5774 0.450012 14.4 0.450012C16.2225 0.450012 17.7 1.99463 17.7 3.90001Z"
+    fill="#515F6C"
+  />
+  <path
+    d="M13.222 16.55C13.2734 16.1744 13.3 15.7905 13.3 15.4C13.3 13.5196 12.6833 11.7897 11.6497 10.4194C12.4587 9.93009 13.3981 9.65001 14.4 9.65001C17.4376 9.65001 19.9 12.2244 19.9 15.4V16.55H13.222Z"
+    fill="#515F6C"
+  />
+  <path
+    d="M5.59998 9.65001C8.63754 9.65001 11.1 12.2244 11.1 15.4V16.55H0.0999756V15.4C0.0999756 12.2244 2.56241 9.65001 5.59998 9.65001Z"
+    fill="#515F6C"
+  />
+</svg>;

package/src/icons/solid/xmark/xmark.icon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../interfaces/icon.interface';
+export declare const XMarkIcon: ({ color, size }: IconSVGProps) => React.JSX.Element;

package/src/icons/solid/xmark/xmark.icon.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {HexColor} from '../../../models/hex-color.model';
+import {Scale} from '../../../theme/scale/index';
+
+export const XMarkIcon = ({color, size = Scale.l}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width={size} height={size} viewBox="0 0 14 14" fill="none">
+      <Path
+        fill={color ? HexColor.of(color).toString() : context.colors.main['0']}
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.722207 0.722176C1.15178 0.2926 1.84827 0.2926 2.27784 0.722176L7.00002 5.44436L11.7222 0.722176C12.1518 0.2926 12.8483 0.2926 13.2778 0.722176C13.7074 1.15175 13.7074 1.84823 13.2778 2.27781L8.55566 6.99999L13.2778 11.7222C13.7074 12.1518 13.7074 12.8482 13.2778 13.2778C12.8483 13.7074 12.1518 13.7074 11.7222 13.2778L7.00002 8.55563L2.27784 13.2778C1.84827 13.7074 1.15178 13.7074 0.722207 13.2778C0.29263 12.8482 0.29263 12.1518 0.722207 11.7222L5.44439 6.99999L0.722207 2.27781C0.29263 1.84823 0.29263 1.15175 0.722207 0.722176Z"
+      />
+    </Svg>
+  );
+};

package/src/interfaces/icon.interface.d.ts

@@ -0,0 +1,11 @@
+import { IconStyleType, IconNameType } from '../types/icontype.type';
+export interface IconSVGProps {
+    color?: string | null;
+    size?: number;
+}
+export interface IconNameInterface extends IconSVGProps {
+    name: IconNameType;
+}
+export interface IconInterface extends IconNameInterface {
+    style: IconStyleType;
+}

package/src/interfaces/icon.interface.ts

@@ -0,0 +1,12 @@
+import {IconStyleType, IconNameType} from '../types/icontype.type';
+
+export interface IconSVGProps {
+  color?: string | null;
+  size?: number;
+}
+export interface IconNameInterface extends IconSVGProps {
+  name: IconNameType;
+}
+export interface IconInterface extends IconNameInterface {
+  style: IconStyleType;
+}

package/src/models/hex-color.model.d.ts

@@ -0,0 +1,6 @@
+export declare class HexColor {
+    private readonly color;
+    private constructor();
+    static of(color: string): HexColor;
+    toString(): string;
+}

package/src/models/hex-color.model.ts

@@ -0,0 +1,25 @@
+export class HexColor {
+  private readonly color: string;
+
+  private constructor(value: string) {
+    if (value.charAt(0) !== '#') {
+      throw new Error('A hex color needs to start with #');
+    }
+
+    if (value.length !== 7) {
+      throw new Error(
+        "A hex color needs to contain 7 chars, we don't support shorthand values."
+      );
+    }
+
+    this.color = value;
+  }
+
+  public static of(color: string): HexColor {
+    return new HexColor(color);
+  }
+
+  public toString(): string {
+    return this.color;
+  }
+}

package/src/models/hex-color.test.js

@@ -0,0 +1,20 @@
+import {HexColor} from './hex-color.model';
+
+describe('invalid hex-color', () => {
+  const cases = [['#333'], ['aaaaaaa']];
+
+  test.each(cases)('given %p returns an Error', (value) => {
+    expect(() => {
+      HexColor.of(value);
+    }).toThrow(Error);
+  });
+});
+
+describe('valid hex-color', () => {
+  const cases = [['#333333'], ['#FFFFFF']];
+
+  test.each(cases)('given %p returns a HexColor', (value) => {
+    const result = HexColor.of(value);
+    expect(result instanceof HexColor).toBe(true);
+  });
+});

package/src/models/initials.model.d.ts

@@ -0,0 +1,7 @@
+export declare class Initials {
+    private readonly initials;
+    private constructor();
+    static for(first: string, second: string): Initials;
+    private static safeLetter;
+    toString(): string;
+}

package/src/models/initials.model.ts

@@ -0,0 +1,32 @@
+export class Initials {
+  private readonly initials: string;
+
+  private constructor(value: string) {
+    if (value.length !== 2) {
+      throw new Error('An initial can only contain 2 characters');
+    }
+    this.initials = value;
+  }
+
+  public static for(first: string, second: string): Initials {
+    let longestWord = second.split(' ').reduce(function (longest, currentWord) {
+      return currentWord.length >= longest.length ? currentWord : longest;
+    }, '');
+
+    return new Initials(this.safeLetter(first) + this.safeLetter(longestWord));
+  }
+
+  private static safeLetter(word: string): string {
+    for (let i = 0; i < word.length; i++) {
+      if (word.charAt(0).match(/[a-z]/i)) {
+        return word.charAt(0).toUpperCase();
+      }
+      word = word.slice(1);
+    }
+    return '?';
+  }
+
+  public toString(): string {
+    return this.initials;
+  }
+}

package/src/models/initials.test.js

@@ -0,0 +1,23 @@
+import {Initials} from './initials.model';
+
+describe('initials', () => {
+  const cases = [
+    ['Jane', 'Doe', 'JD'],
+    ['Patrick', "O'Neill", 'PO'],
+    ['Eric', 'Ogden Ellis', 'EE'],
+    ['Dennis', 'Roth', 'DR'],
+    ['Angela', 'Hackshaw', 'AH'],
+    ['Jack', 'Coxon Hanwell', 'JH'],
+    ['Fay', 'Simmons', 'FS'],
+    ['Charlotte', 'Brooks', 'CB'],
+    ["''''", "''''", '??'],
+  ];
+
+  test.each(cases)(
+    'given %p and %p as arguments, returns %p',
+    (first, second, expectedResult) => {
+      const result = Initials.for(first, second);
+      expect(result.toString()).toEqual(expectedResult);
+    }
+  );
+});

package/src/models/time-slot-record.d.ts

@@ -0,0 +1,15 @@
+export interface TimeSlotRecordJSON {
+    in: string;
+    out: string;
+}
+export declare class TimeSlotRecord {
+    start: string;
+    end?: string;
+    private constructor();
+    static fromJson(json: TimeSlotRecordJSON): TimeSlotRecord;
+    static fromEmpty(): TimeSlotRecord;
+    static fromRecord(seq: TimeSlotRecord): TimeSlotRecord;
+    isEmpty(): boolean;
+    isComplete(): boolean;
+    toJson(): TimeSlotRecordJSON;
+}

package/src/models/time-slot-record.ts

@@ -0,0 +1,37 @@
+export interface TimeSlotRecordJSON {
+  in: string;
+  out: string;
+}
+
+export class TimeSlotRecord {
+  private constructor(public start: string, public end?: string) {}
+
+  static fromJson(json: TimeSlotRecordJSON): TimeSlotRecord {
+    // add validation here if needed
+    return new TimeSlotRecord(json.in, json.out);
+  }
+
+  static fromEmpty(): TimeSlotRecord {
+    // add validation here if needed
+    return new TimeSlotRecord('', '');
+  }
+
+  static fromRecord(seq: TimeSlotRecord): TimeSlotRecord {
+    return new TimeSlotRecord(seq.start, seq.end);
+  }
+
+  isEmpty(): boolean {
+    return this.start == '' && this.end == '';
+  }
+
+  isComplete(): boolean {
+    return this.start !== '' && this.end !== '';
+  }
+
+  toJson(): TimeSlotRecordJSON {
+    return {
+      in: this.start,
+      out: this.end ? this.end : '',
+    };
+  }
+}

package/src/models/time-slot-sequence.d.ts

@@ -0,0 +1,15 @@
+import { TimeSlotRecord, TimeSlotRecordJSON } from './time-slot-record';
+export declare class TimeSlotSequence {
+    readonly first: TimeSlotRecord;
+    readonly second: TimeSlotRecord;
+    readonly third: TimeSlotRecord;
+    private constructor();
+    static fromAttendanceRecordArray(arr: TimeSlotRecord[]): TimeSlotSequence;
+    static fromTimeSlotRecordJSONArray(arr: TimeSlotRecordJSON[]): TimeSlotSequence;
+    static fromEmpty(): TimeSlotSequence;
+    asArray(): TimeSlotRecord[];
+    toJson(): TimeSlotRecord[];
+    addToNextSlot(checkInOutTime: string): void;
+    isComplete(): boolean;
+    isEmpty(): boolean;
+}

package/src/models/time-slot-sequence.ts

@@ -0,0 +1,79 @@
+import {TimeSlotRecord, TimeSlotRecordJSON} from './time-slot-record';
+
+export class TimeSlotSequence {
+  private constructor(
+    public readonly first: TimeSlotRecord,
+    public readonly second: TimeSlotRecord,
+    public readonly third: TimeSlotRecord
+  ) {}
+
+  static fromAttendanceRecordArray(arr: TimeSlotRecord[]): TimeSlotSequence {
+    return new TimeSlotSequence(
+      arr[0] ? arr[0] : TimeSlotRecord.fromEmpty(),
+      arr[1] ? arr[1] : TimeSlotRecord.fromEmpty(),
+      arr[2] ? arr[2] : TimeSlotRecord.fromEmpty()
+    );
+  }
+
+  static fromTimeSlotRecordJSONArray(
+    arr: TimeSlotRecordJSON[]
+  ): TimeSlotSequence {
+    return new TimeSlotSequence(
+      TimeSlotRecord.fromJson(
+        arr[0] ? arr[0] : TimeSlotRecord.fromEmpty().toJson()
+      ),
+      TimeSlotRecord.fromJson(
+        arr[1] ? arr[1] : TimeSlotRecord.fromEmpty().toJson()
+      ),
+      TimeSlotRecord.fromJson(
+        arr[2] ? arr[2] : TimeSlotRecord.fromEmpty().toJson()
+      )
+    );
+  }
+
+  static fromEmpty(): TimeSlotSequence {
+    return new TimeSlotSequence(
+      TimeSlotRecord.fromEmpty(),
+      TimeSlotRecord.fromEmpty(),
+      TimeSlotRecord.fromEmpty()
+    );
+  }
+
+  asArray(): TimeSlotRecord[] {
+    return [this.first, this.second, this.third];
+  }
+
+  toJson(): TimeSlotRecord[] {
+    return [this.first, this.second, this.third];
+  }
+
+  addToNextSlot(checkInOutTime: string) {
+    if (this.first.start === '') {
+      this.first.start = checkInOutTime;
+    } else if (this.first.end === undefined || this.first.end === '') {
+      this.first.end = checkInOutTime;
+    } else if (this.second.start === '') {
+      this.second.start = checkInOutTime;
+    } else if (this.second.end === undefined || this.second.end === '') {
+      this.second.end = checkInOutTime;
+    } else if (this.third.start === '') {
+      this.third.start = checkInOutTime;
+    } else if (this.third.end === undefined || this.third.end === '') {
+      this.third.end = checkInOutTime;
+    }
+  }
+
+  isComplete(): boolean {
+    return (
+      this.first.isComplete() &&
+      this.second.isComplete() &&
+      this.third.isComplete()
+    );
+  }
+
+  isEmpty(): boolean {
+    return (
+      this.first.isEmpty() && this.second.isEmpty() && this.third.isEmpty()
+    );
+  }
+}

package/src/theme/font/font.d.ts

@@ -0,0 +1,72 @@
+export declare const Font: {
+    huge: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+    };
+    hugeBold: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+    };
+    big: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+    };
+    bigBold: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+    };
+    large: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+    };
+    largeBold: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+    };
+    medium: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+    };
+    mediumBold: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+    };
+    regular: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+    };
+    regularBold: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+    };
+    small: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+    };
+    smallBold: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+    };
+    tiny: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+    };
+    tinyBold: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+    };
+};

package/src/theme/font/font.ts

@@ -0,0 +1,72 @@
+export const Font = {
+  huge: {
+    fontFamily: 'SourceSansPro',
+    fontSize: 38,
+    lineHeight: 47.8,
+  },
+  hugeBold: {
+    fontFamily: 'SourceSansProBold',
+    fontSize: 38,
+    lineHeight: 47.8,
+  },
+  big: {
+    fontFamily: 'SourceSansPro',
+    fontSize: 24,
+    lineHeight: 30.2,
+  },
+  bigBold: {
+    fontFamily: 'SourceSansProBold',
+    fontSize: 24,
+    lineHeight: 30.2,
+  },
+  large: {
+    fontFamily: 'SourceSansPro',
+    fontSize: 18,
+    lineHeight: 22.6,
+  },
+  largeBold: {
+    fontFamily: 'SourceSansProBold',
+    fontSize: 18,
+    lineHeight: 22.6,
+  },
+  medium: {
+    fontFamily: 'SourceSansPro',
+    fontSize: 16,
+    lineHeight: 22.4,
+  },
+  mediumBold: {
+    fontFamily: 'SourceSansProBold',
+    fontSize: 16,
+    lineHeight: 22.4,
+  },
+  regular: {
+    fontFamily: 'Montserrat',
+    fontSize: 14,
+    lineHeight: 22.4,
+  },
+  regularBold: {
+    fontFamily: 'MontserratBold',
+    fontSize: 14,
+    lineHeight: 22.4,
+  },
+  small: {
+    fontFamily: 'Montserrat',
+    fontSize: 13,
+    lineHeight: 20.4,
+  },
+  smallBold: {
+    fontFamily: 'MontserratBold',
+    fontSize: 13,
+    lineHeight: 20.4,
+  },
+  tiny: {
+    fontFamily: 'Montserrat',
+    fontSize: 11,
+    lineHeight: 17.9,
+  },
+  tinyBold: {
+    fontFamily: 'MontserratBold',
+    fontSize: 11,
+    lineHeight: 17.9,
+  },
+};

package/src/theme/font/index.d.ts

@@ -0,0 +1,3 @@
+import { Font } from './font';
+import { LoadFonts } from './load-fonts';
+export { Font, LoadFonts };

package/src/theme/font/index.ts

@@ -0,0 +1,4 @@
+import {Font} from './font';
+import {LoadFonts} from './load-fonts';
+
+export {Font, LoadFonts};

package/src/theme/font/load-fonts.d.ts

@@ -0,0 +1 @@
+export declare function LoadFonts(): [boolean, Error];

package/src/theme/font/load-fonts.ts

@@ -0,0 +1,10 @@
+import {useFonts} from 'expo-font';
+
+export function LoadFonts() {
+  return useFonts({
+    Montserrat: require('../../../assets/fonts/montserrat/regular.ttf'),
+    MontserratBold: require('../../../assets/fonts/montserrat/bold.ttf'),
+    SourceSansPro: require('../../../assets/fonts/source-sans-pro/regular.ttf'),
+    SourceSansProBold: require('../../../assets/fonts/source-sans-pro/bold.ttf'),
+  });
+}

package/src/theme/provider/index.d.ts

@@ -0,0 +1,3 @@
+import { ParentTheme } from './parent.theme';
+import { StaffMemberTheme } from './staff-member.theme';
+export { ParentTheme, StaffMemberTheme };

package/src/theme/provider/index.ts

@@ -0,0 +1,4 @@
+import {ParentTheme} from './parent.theme';
+import {StaffMemberTheme} from './staff-member.theme';
+
+export {ParentTheme, StaffMemberTheme};