@brickclay-org/ui 0.0.10 → 0.0.14

package/index.d.ts

@@ -0,0 +1,420 @@
+import * as i0 from '@angular/core';
+import { OnInit, OnDestroy, OnChanges, EventEmitter, SimpleChanges, AfterViewInit, QueryList, ElementRef } from '@angular/core';
+import * as rxjs from 'rxjs';
+import * as i1 from '@angular/common';
+import { ControlValueAccessor } from '@angular/forms';
+
+declare const BrickclayIcons: {
+    readonly arrowleft: "assets/icons/chevron-left.svg";
+    readonly arrowRight: "assets/icons/chevron-right.svg";
+    readonly calenderIcon: "assets/icons/calender.svg";
+    readonly timerIcon: "assets/icons/timer.svg";
+};
+
+declare class BrickclayLib {
+    static ɵfac: i0.ɵɵFactoryDeclaration<BrickclayLib, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BrickclayLib, "lib-brickclay-lib", never, {}, {}, never, never, true, never>;
+}
+
+declare class CalendarManagerService {
+    private calendarInstances;
+    private closeAllSubject;
+    closeAll$: rxjs.Observable<void>;
+    /**
+     * Register a calendar instance with its close function
+     */
+    register(closeFn: () => void): () => void;
+    /**
+     * Close all calendars except the one being opened
+     */
+    closeAllExcept(exceptCloseFn: () => void): void;
+    /**
+     * Close all calendars
+     */
+    closeAll(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CalendarManagerService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<CalendarManagerService>;
+}
+
+interface CalendarRange {
+    start: Date;
+    end: Date;
+}
+interface CalendarSelection {
+    startDate: Date | null;
+    endDate: Date | null;
+    selectedDates?: Date[];
+}
+declare class CustomCalendarComponent implements OnInit, OnDestroy, OnChanges {
+    private calendarManager;
+    enableTimepicker: boolean;
+    autoApply: boolean;
+    closeOnAutoApply: boolean;
+    showCancel: boolean;
+    linkedCalendars: boolean;
+    singleDatePicker: boolean;
+    showWeekNumbers: boolean;
+    showISOWeekNumbers: boolean;
+    customRangeDirection: boolean;
+    lockStartDate: boolean;
+    position: 'center' | 'left' | 'right';
+    drop: 'up' | 'down';
+    dualCalendar: boolean;
+    showRanges: boolean;
+    timeFormat: 12 | 24;
+    enableSeconds: boolean;
+    customRanges?: Record<string, CalendarRange>;
+    multiDateSelection: boolean;
+    maxDate?: Date;
+    minDate?: Date;
+    placeholder: string;
+    opens: 'left' | 'right' | 'center';
+    inline: boolean;
+    isDisplayCrossIcon: boolean;
+    selected: EventEmitter<CalendarSelection>;
+    opened: EventEmitter<void>;
+    closed: EventEmitter<void>;
+    /**
+     * External value passed from parent. If provided, component will select these dates on init / change.
+     * Accepts { startDate: Date|null, endDate: Date|null, selectedDates?: Date[] }
+     */
+    selectedValue: CalendarSelection | null;
+    /** Optional display format for the input value. Uses moment formatting tokens. */
+    displayFormat: string;
+    brickclayIcons: {
+        readonly arrowleft: "assets/icons/chevron-left.svg";
+        readonly arrowRight: "assets/icons/chevron-right.svg";
+        readonly calenderIcon: "assets/icons/calender.svg";
+        readonly timerIcon: "assets/icons/timer.svg";
+    };
+    show: boolean;
+    today: Date;
+    month: number;
+    year: number;
+    calendar: {
+        day: number;
+        currentMonth: boolean;
+    }[][];
+    leftMonth: number;
+    leftYear: number;
+    rightMonth: number;
+    rightYear: number;
+    leftCalendar: {
+        day: number;
+        currentMonth: boolean;
+    }[][];
+    rightCalendar: {
+        day: number;
+        currentMonth: boolean;
+    }[][];
+    startDate: Date | null;
+    endDate: Date | null;
+    selectedDates: Date[];
+    disableHighlight: boolean;
+    hoveredDate: Date | null;
+    minuteInputValues: {
+        [key: string]: string;
+    };
+    selectedHour: number;
+    selectedMinute: number;
+    selectedSecond: number;
+    selectedAMPM: 'AM' | 'PM';
+    startHour: number;
+    startMinute: number;
+    startSecond: number;
+    startAMPM: 'AM' | 'PM';
+    endHour: number;
+    endMinute: number;
+    endSecond: number;
+    endAMPM: 'AM' | 'PM';
+    openTimePickerId: string | null;
+    closePickerCounter: {
+        [key: string]: number;
+    };
+    defaultRanges: Record<string, CalendarRange>;
+    activeRange: string | null;
+    rangeOrder: string[];
+    private unregisterFn?;
+    private closeAllSubscription?;
+    private closeFn?;
+    constructor(calendarManager: CalendarManagerService);
+    onClickOutside(event: MouseEvent): void;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    checkAndSetActiveRange(): void;
+    initializeDefaultRanges(): void;
+    initializeTimeFromDate(date: Date, isStart: boolean): void;
+    toggle(): void;
+    close(): void;
+    onDateHover(day: number | null, fromRight?: boolean): void;
+    onDateLeave(): void;
+    selectDate(day: number | null, fromRight?: boolean): void;
+    handleMultiDateSelection(selected: Date): void;
+    getDateString(date: Date): string;
+    isDateInMultiSelection(year: number, month: number, day: number): boolean;
+    apply(): void;
+    cancel(): void;
+    clear(): void;
+    chooseRange(key: string): void;
+    emitSelection(): void;
+    addDays(date: Date, days: number): Date;
+    generateCalendar(): void;
+    nextMonth(): void;
+    prevMonth(): void;
+    nextLeftMonth(): void;
+    prevLeftMonth(): void;
+    nextRightMonth(): void;
+    prevRightMonth(): void;
+    initializeDual(): void;
+    generateDualCalendars(): void;
+    buildCalendar(year: number, month: number): {
+        day: number;
+        currentMonth: boolean;
+    }[][];
+    isDateSelected(year: number, month: number, day: number): boolean;
+    isDateInRange(year: number, month: number, day: number): boolean;
+    isDateDisabled(year: number, month: number, day: number): boolean;
+    isToday(year: number, month: number, day: number): boolean;
+    getDisplayValue(): string;
+    getTimeInputValue(isStart?: boolean): string;
+    getSingleTimeInputValue(): string;
+    getSingleTimePickerDisplay(): string;
+    getDualTimePickerDisplay(isStart?: boolean): string;
+    onTimePickerOpened(pickerId: string): void;
+    onTimePickerClosed(pickerId: string): void;
+    shouldClosePicker(pickerId: string): number;
+    private parsePickerTimeString;
+    onSingleTimePickerChange(time: string): void;
+    onDualTimePickerChange(time: string, isStart?: boolean): void;
+    onTimeChange(event: any, isStart?: boolean): void;
+    onSingleTimeChange(event: any): void;
+    incrementHour(isStart?: boolean): void;
+    decrementHour(isStart?: boolean): void;
+    incrementMinute(isStart?: boolean): void;
+    decrementMinute(isStart?: boolean): void;
+    toggleAMPM(isStart?: boolean): void;
+    incrementSingleHour(): void;
+    decrementSingleHour(): void;
+    incrementSingleMinute(): void;
+    decrementSingleMinute(): void;
+    toggleSingleAMPM(): void;
+    getMonthName(month: number): string;
+    onHourInput(event: any, isStart?: boolean, isSingle?: boolean): void;
+    onHourBlur(event: any, isStart?: boolean, isSingle?: boolean): void;
+    onMinuteInput(event: any, isStart?: boolean, isSingle?: boolean): void;
+    onMinuteBlur(event: any, isStart?: boolean, isSingle?: boolean): void;
+    getDisplayHour(hour: number): number;
+    getMinuteDisplayValue(isStart: boolean, isSingle: boolean): string;
+    applyTimeToDate(date: Date, isStart: boolean): void;
+    onTimeInputFocus(event: any): void;
+    formatAllMinuteInputs(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CustomCalendarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CustomCalendarComponent, "brickclay-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; }; }, { "selected": "selected"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+}
+
+interface TimeConfiguration {
+    date: Date;
+    allDay: boolean;
+    startTime: string;
+    endTime: string;
+}
+interface ScheduledDateSelection {
+    mode: 'single' | 'multiple' | 'range';
+    singleDate?: {
+        startDate: Date;
+        endDate: Date;
+        allDay: boolean;
+        startTime: string;
+        endTime: string;
+    };
+    multipleDates?: TimeConfiguration[];
+    dateRange?: {
+        startDate: Date;
+        endDate: Date;
+        allDay: boolean;
+        startTime: string;
+        endTime: string;
+    };
+}
+declare class ScheduledDatePickerComponent implements OnInit {
+    timeFormat: 12 | 24;
+    enableSeconds: boolean;
+    scheduled: EventEmitter<ScheduledDateSelection>;
+    cleared: EventEmitter<void>;
+    activeTab: 'single' | 'multiple' | 'range';
+    openTimePickerId: string | null;
+    closePickerCounter: {
+        [key: string]: number;
+    };
+    singleDate: Date | null;
+    singleAllDay: boolean;
+    singleStartTime: string;
+    singleEndTime: string;
+    multipleDates: TimeConfiguration[];
+    rangeStartDate: Date | null;
+    rangeEndDate: Date | null;
+    rangeAllDay: boolean;
+    rangeStartTime: string;
+    rangeEndTime: string;
+    ngOnInit(): void;
+    onTabChange(tab: 'single' | 'multiple' | 'range'): void;
+    onTimePickerOpened(pickerId: string): void;
+    onTimePickerClosed(pickerId: string): void;
+    shouldClosePicker(pickerId: string): number;
+    onSingleDateSelected(event: CalendarSelection): void;
+    onSingleAllDayChange(): void;
+    onSingleStartTimeChange(time: string): void;
+    onSingleEndTimeChange(time: string): void;
+    updateSingleDateTimes(): void;
+    onMultipleDatesSelected(event: CalendarSelection): void;
+    onMultipleDateAllDayChange(index: number): void;
+    onMultipleDateStartTimeChange(index: number, time: string): void;
+    onMultipleDateEndTimeChange(index: number, time: string): void;
+    onRangeSelected(event: CalendarSelection): void;
+    onRangeAllDayChange(): void;
+    onRangeStartTimeChange(time: string): void;
+    onRangeEndTimeChange(time: string): void;
+    updateRangeTimes(): void;
+    parseTimeString(timeStr: string): {
+        hours: number;
+        minutes: number;
+    };
+    getDateString(date: Date): string;
+    formatDate(date: Date): string;
+    emitScheduled(): void;
+    clear(): void;
+    apply(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ScheduledDatePickerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ScheduledDatePickerComponent, "brickclay-scheduled-date-picker", never, { "timeFormat": { "alias": "timeFormat"; "required": false; }; "enableSeconds": { "alias": "enableSeconds"; "required": false; }; }, { "scheduled": "scheduled"; "cleared": "cleared"; }, never, never, true, never>;
+}
+
+declare class TimePickerComponent implements OnInit, OnChanges, AfterViewInit {
+    value: string;
+    label: string;
+    placeholder: string;
+    position: 'left' | 'right';
+    pickerId: string;
+    closePicker: number;
+    timeFormat: 12 | 24;
+    showSeconds: boolean;
+    timeChange: EventEmitter<string>;
+    pickerOpened: EventEmitter<string>;
+    pickerClosed: EventEmitter<string>;
+    timeScrollElements: QueryList<ElementRef>;
+    showPicker: boolean;
+    currentHour: number;
+    currentMinute: number;
+    currentAMPM: string;
+    currentSecond: number;
+    brickclayIcons: {
+        readonly arrowleft: "assets/icons/chevron-left.svg";
+        readonly arrowRight: "assets/icons/chevron-right.svg";
+        readonly calenderIcon: "assets/icons/calender.svg";
+        readonly timerIcon: "assets/icons/timer.svg";
+    };
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    parseTimeValue(): void;
+    getHours(): number[];
+    getMinutes(): number[];
+    getSeconds(): number[];
+    getAMPMOptions(): string[];
+    parseTimeStringToComponents(timeStr: string): {
+        hour: number;
+        minute: number;
+        second: number;
+        ampm: string;
+    };
+    formatTimeFromComponents(hour: number, minute: number, second: number, ampm: string): string;
+    togglePicker(): void;
+    onHourChange(hour: number): void;
+    onMinuteChange(minute: number): void;
+    onSecondChange(second: number): void;
+    onAMPMChange(ampm: string): void;
+    updateTime(): void;
+    scrollToSelectedTimes(): void;
+    onDocumentClick(event: MouseEvent): void;
+    private previousCloseCounter;
+    ngOnChanges(changes: SimpleChanges): void;
+    onInputKeydown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TimePickerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TimePickerComponent, "brickclay-time-picker", never, { "value": { "alias": "value"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "position": { "alias": "position"; "required": false; }; "pickerId": { "alias": "pickerId"; "required": false; }; "closePicker": { "alias": "closePicker"; "required": false; }; "timeFormat": { "alias": "timeFormat"; "required": false; }; "showSeconds": { "alias": "showSeconds"; "required": false; }; }, { "timeChange": "timeChange"; "pickerOpened": "pickerOpened"; "pickerClosed": "pickerClosed"; }, never, never, true, never>;
+}
+
+/**
+ * Optional NgModule wrapper for projects that prefer module-based usage.
+ *
+ * Note:
+ * - The components themselves are standalone, so you can also import them
+ *   directly into any standalone component without using this module.
+ * - This module is mainly for:
+ *   - Existing apps that still use feature modules
+ *   - Easier "plug-and-play" integration: import CalendarModule once and use
+ *     the three exported components anywhere in your templates.
+ */
+declare class CalendarModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CalendarModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CalendarModule, never, [typeof i1.CommonModule, typeof CustomCalendarComponent, typeof ScheduledDatePickerComponent, typeof TimePickerComponent], [typeof CustomCalendarComponent, typeof ScheduledDatePickerComponent, typeof TimePickerComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<CalendarModule>;
+}
+
+declare class ToggleComponent implements ControlValueAccessor {
+    label: string;
+    disabled: boolean;
+    toggleClass: string;
+    change: EventEmitter<boolean>;
+    isChecked: boolean;
+    onChange: (_: boolean) => void;
+    onTouched: () => void;
+    toggle(): void;
+    writeValue(value: boolean): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToggleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToggleComponent, "brickclay-toggle", never, { "label": { "alias": "label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "toggleClass": { "alias": "toggleClass"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
+}
+
+declare class CheckboxComponent implements ControlValueAccessor {
+    checkboxClass: string;
+    label: string;
+    labelClass: string;
+    disabled: boolean;
+    change: EventEmitter<boolean>;
+    isChecked: boolean;
+    private onChange;
+    private onTouched;
+    toggle(): void;
+    /** ------------------ ControlValueAccessor methods ------------------ */
+    writeValue(value: boolean): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxComponent, "brickclay-checkbox", never, { "checkboxClass": { "alias": "checkboxClass"; "required": false; }; "label": { "alias": "label"; "required": false; }; "labelClass": { "alias": "labelClass"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
+}
+
+declare class RadioComponent implements ControlValueAccessor {
+    radioClass: string;
+    label: string;
+    labelClass: string;
+    value: any;
+    disabled: boolean;
+    variant: 'dot' | 'tick';
+    change: EventEmitter<any>;
+    modelValue: any;
+    onChange: (_: any) => void;
+    onTouched: () => void;
+    select(): void;
+    get isChecked(): boolean;
+    writeValue(value: any): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RadioComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RadioComponent, "brickclay-radio-button", never, { "radioClass": { "alias": "radioClass"; "required": false; }; "label": { "alias": "label"; "required": false; }; "labelClass": { "alias": "labelClass"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
+}
+
+export { BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule, CheckboxComponent, CustomCalendarComponent, RadioComponent, ScheduledDatePickerComponent, TimePickerComponent, ToggleComponent };
+export type { CalendarRange, CalendarSelection, ScheduledDateSelection, TimeConfiguration };

package/package.json

@@ -1,15 +1,24 @@
-{
-  "name": "@brickclay-org/ui",
-  "version": "0.0.10",
-  "main": "fesm2022/brickclay-org-ui.mjs",
-  "module": "fesm2022/brickclay-org-ui.mjs",
-  "typings": "index.d.ts",
-  "peerDependencies": {
-    "@angular/common": ">=17.0.0 <21.0.0",
-    "@angular/core": ">=17.0.0 <21.0.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false
-}
+{
+  "name": "@brickclay-org/ui",
+  "version": "0.0.14",
+  "peerDependencies": {
+    "@angular/common": ">=17.0.0 <=21.0.0",
+    "@angular/core": ">=17.0.0 <=21.0.0",
+    "moment": "^2.29.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/brickclay-org-ui.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/brickclay-org-ui.mjs"
+    }
+  }
+}

package/src/assets/icons/calender.svg

@@ -0,0 +1,19 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3797_46309)">
+<path d="M14.545 5.45448V11.6363C14.545 13.8181 13.4541 15.2727 10.9086 15.2727H5.09047C2.54501 15.2727 1.4541 13.8181 1.4541 11.6363V5.45448C1.4541 3.27266 2.54501 1.81812 5.09047 1.81812H10.9086C13.4541 1.81812 14.545 3.27266 14.545 5.45448Z" stroke="#141414" stroke-width="1.2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.09082 0.727295V2.90911" stroke="#141414" stroke-width="1.2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.9092 0.727295V2.90911" stroke="#141414" stroke-width="1.2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.81836 5.88354H14.182" stroke="#141414" stroke-width="1.2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.6868 9.23619H10.6933" stroke="#141414" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.6868 11.4181H10.6933" stroke="#141414" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.99636 9.23619H8.00289" stroke="#141414" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.99636 11.4181H8.00289" stroke="#141414" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.30495 9.23644H5.31149" stroke="#141414" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.30495 11.4181H5.31149" stroke="#141414" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_3797_46309">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/icons/chevron-down.svg

@@ -0,0 +1,10 @@
+<svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_535_3111)">
+<path d="M0.835938 1.16797L5.83593 6.16797L10.8359 1.16797" stroke="#6B7080" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_535_3111">
+<rect width="7" height="12" fill="white" transform="matrix(0 -1 1 0 0 7)"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/icons/chevron-left.svg

@@ -0,0 +1,3 @@
+<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.83398 0.833313L0.833984 5.83331L5.83398 10.8333" stroke="#6B7080" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/chevron-right.svg

@@ -0,0 +1,3 @@
+<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.833984 10.8333L5.83398 5.83331L0.833984 0.833313" stroke="#6B7080" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/chevron-up.svg

@@ -0,0 +1,10 @@
+<svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_535_3113)">
+<path d="M10.8359 6.16797L5.83593 1.16797L0.835938 6.16797" stroke="#6B7080" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_535_3113">
+<rect width="7" height="12" fill="white" transform="matrix(0 -1 1 0 0 7)"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/icons/pagination-left-gray.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 9L1 5L5 1" stroke="#B9BBC6" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/pagination-right-gray.svg

@@ -0,0 +1,10 @@
+<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_268_9)">
+<path d="M1 9L5 5L1 1" stroke="#B9BBC6" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_268_9">
+<rect width="6" height="10" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/icons/timer.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 14C10.8593 14 14 10.8593 14 7C14 3.14067 10.8594 0 7 0C3.14063 0 0 3.14067 0 7C0 10.8593 3.14067 14 7 14ZM7 0.933318C10.346 0.933318 13.0667 3.65398 13.0667 7C13.0667 10.346 10.346 13.0667 7 13.0667C3.65398 13.0667 0.933318 10.346 0.933318 7C0.933318 3.65398 3.65401 0.933318 7 0.933318Z" fill="#BBBDC5"/>
+<path d="M9.04153 9.23071C9.12788 9.3007 9.23052 9.33339 9.3332 9.33339C9.47086 9.33339 9.60619 9.27272 9.69718 9.15839C9.85819 8.95772 9.82549 8.66372 9.62486 8.50271L7.46652 6.77604V3.26671C7.46652 3.01004 7.25653 2.80005 6.99986 2.80005C6.74319 2.80005 6.5332 3.01004 6.5332 3.26671V7.00006C6.5332 7.1424 6.59855 7.27539 6.7082 7.36404L9.04153 9.23071Z" fill="#BBBDC5"/>
+</svg>

package/src/lib/checkbox/checkbox.css

@@ -0,0 +1,26 @@
+/*---- Checkbox Sizes Class ---- */
+.xsm {
+  @apply size-[14px];
+}
+.sm {
+  @apply size-[16px];
+}
+.md {
+  @apply size-[18px];
+}
+.lg {
+  @apply size-[20px];
+}
+/*---- Tick Sizes Class ---- */
+.xsm svg {
+  @apply size-[10.5px];
+}
+.sm svg {
+  @apply size-[12px];
+}
+.md svg {
+  @apply size-[13.5px];
+}
+.lg svg {
+  @apply size-[14px];
+}

package/src/lib/radio/radio.css

@@ -0,0 +1,39 @@
+/*---- Checkbox Sizes Class ---- */
+.xsm {
+  @apply size-[14px];
+}
+.sm {
+  @apply size-[16px];
+}
+.md {
+  @apply size-[18px];
+}
+.lg {
+  @apply size-[19px];
+}
+/*---- Dot Sizes Class ---- */
+.xsm .dot {
+  @apply size-[6px];
+}
+.sm .dot {
+  @apply size-[8px];
+}
+.md .dot {
+  @apply size-[10px];
+}
+.lg .dot {
+  @apply size-[11px];
+}
+/*---- Tick Sizes Class ---- */
+.xsm .tick {
+  @apply size-[8px];
+}
+.sm .tick {
+  @apply size-[9px];
+}
+.md .tick {
+  @apply size-[12px];
+}
+.lg .tick {
+  @apply size-[13px];
+}