@mindly/ui-components 5.1.1 → 5.2.1

package/dist/esm/lib2/shared/hooks/index.d.ts

@@ -2,3 +2,4 @@ export * from './use-dom-ref';
 export * from './use-event';
 export * from './useAutoFocus';
 export * from './useIsKeyboardShown';
+export * from './useToastContext';

package/dist/esm/lib2/shared/hooks/useToastContext.d.ts

@@ -0,0 +1,3 @@
+import { ToastState } from '@react-stately/toast';
+import { MindlyToastProps } from '../ui/Toast/types';
+export declare function useToastContext(): ToastState<MindlyToastProps>;

package/dist/esm/lib2/shared/providers/ToastProvider/ToastProvider.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { ToastState } from '@react-stately/toast';
+import { MindlyToastProps, ToastProviderProps } from '../../ui/Toast/types';
+export declare const ToastContext: React.Context<ToastState<MindlyToastProps> | undefined>;
+export declare function ToastProvider({ children, ...props }: React.PropsWithChildren<ToastProviderProps>): JSX.Element;

package/dist/esm/lib2/shared/providers/ToastProvider/index.d.ts

@@ -0,0 +1 @@
+export * from './ToastProvider';

package/dist/esm/lib2/shared/providers/index.d.ts

@@ -1 +1,2 @@
 export * from './ThemeProvider';
+export * from './ToastProvider';

package/dist/esm/lib2/shared/ui/AppFooter_v2/AppFooter_v2.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 type AppFooterProps = {
-    children: React.ReactNode;
+    children?: React.ReactNode;
     transparent?: boolean;
     bottomSaveArea?: boolean;
 };

package/dist/esm/lib2/shared/ui/Toast/Toast.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import './Toast.css';
+import { ToastProps } from './types';
+export declare function Toast<T extends React.ReactNode>({ state, ...props }: ToastProps<T>): JSX.Element;

package/dist/esm/lib2/shared/ui/Toast/ToastCloseButton.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { AriaButtonProps } from 'react-aria';
+export declare const ToastCloseButton: React.ForwardRefExoticComponent<AriaButtonProps<"button"> & {
+    className?: string | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;

package/dist/esm/lib2/shared/ui/Toast/ToastRegion.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { ToastRegionProps } from './types';
+export declare function ToastRegion<T extends React.ReactNode>({ state, ...props }: ToastRegionProps<T>): JSX.Element;

package/dist/esm/lib2/shared/ui/Toast/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Toast';
+export * from './ToastRegion';

package/dist/esm/lib2/shared/ui/Toast/styles.d.ts

@@ -0,0 +1,50 @@
+export declare const toastStyles: import("tailwind-variants").TVReturnType<{
+    type: {
+        success: "bg-badges-success-main";
+        error: "bg-color-info-red-not-red";
+        attention: "bg-badges-attention-main";
+        info: "bg-color-info-blue";
+    };
+}, undefined, "toast fixed left-0 right-0 w-full h-[80px]", import("tailwind-variants/dist/config").TVConfig<{
+    type: {
+        success: "bg-badges-success-main";
+        error: "bg-color-info-red-not-red";
+        attention: "bg-badges-attention-main";
+        info: "bg-color-info-blue";
+    };
+}, {
+    type: {
+        success: "bg-badges-success-main";
+        error: "bg-color-info-red-not-red";
+        attention: "bg-badges-attention-main";
+        info: "bg-color-info-blue";
+    };
+}>, {
+    type: {
+        success: "bg-badges-success-main";
+        error: "bg-color-info-red-not-red";
+        attention: "bg-badges-attention-main";
+        info: "bg-color-info-blue";
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    type: {
+        success: "bg-badges-success-main";
+        error: "bg-color-info-red-not-red";
+        attention: "bg-badges-attention-main";
+        info: "bg-color-info-blue";
+    };
+}, undefined, "toast fixed left-0 right-0 w-full h-[80px]", import("tailwind-variants/dist/config").TVConfig<{
+    type: {
+        success: "bg-badges-success-main";
+        error: "bg-color-info-red-not-red";
+        attention: "bg-badges-attention-main";
+        info: "bg-color-info-blue";
+    };
+}, {
+    type: {
+        success: "bg-badges-success-main";
+        error: "bg-color-info-red-not-red";
+        attention: "bg-badges-attention-main";
+        info: "bg-color-info-blue";
+    };
+}>, unknown, unknown, undefined>>;

package/dist/esm/lib2/shared/ui/Toast/types.d.ts

@@ -0,0 +1,13 @@
+import { ToastState, ToastStateProps } from '@react-stately/toast';
+import { AriaToastProps, AriaToastRegionProps } from '@react-aria/toast';
+export type ToastProviderProps = ToastStateProps;
+export type MindlyToastProps = {
+    type?: 'success' | 'error' | 'attention' | 'info';
+    text: string;
+};
+export interface ToastRegionProps<T> extends AriaToastRegionProps {
+    state: ToastState<T>;
+}
+export interface ToastProps<T> extends AriaToastProps<T> {
+    state: ToastState<T>;
+}

package/dist/esm/lib2/shared/ui/index.d.ts

@@ -14,3 +14,4 @@ export * from './Calendar';
 export * from './Textarea_v2';
 export * from './Rating';
 export * from './IconButton';
+export * from './Toast';

package/dist/index.d.ts

@@ -6,6 +6,8 @@ import { RefresherEventDetail, ScrollDetail, ScrollBaseDetail } from '@ionic/rea
 import { IonContentCustomEvent, IonSearchbarCustomEvent } from '@ionic/core/dist/types/components';
 import { Node, ListState, ItemProps, SelectionBehavior, SelectionMode } from 'react-stately';
 import { AriaListBoxProps, AriaCalendarProps, DateValue } from 'react-aria';
+import { ToastStateProps, ToastState } from '@react-stately/toast';
+import { AriaToastRegionProps } from '@react-aria/toast';
 import { SearchbarChangeEventDetail } from '@ionic/core';
 import { WithTranslation } from 'react-i18next';
 
@@ -1424,7 +1426,7 @@ type TypographyProps = {
 declare const _default$a: React__default.NamedExoticComponent<TypographyProps>;
 
 type AppFooterProps = {
-    children: React__default.ReactNode;
+    children?: React__default.ReactNode;
     transparent?: boolean;
     bottomSaveArea?: boolean;
 };
@@ -1589,6 +1591,17 @@ type IconButtonProps = {
 };
 declare const _default$1: React__default.NamedExoticComponent<IconButtonProps>;
 
+type ToastProviderProps = ToastStateProps;
+type MindlyToastProps = {
+    type?: 'success' | 'error' | 'attention' | 'info';
+    text: string;
+};
+interface ToastRegionProps<T> extends AriaToastRegionProps {
+    state: ToastState<T>;
+}
+
+declare function ToastRegion<T extends React.ReactNode>({ state, ...props }: ToastRegionProps<T>): JSX.Element;
+
 declare enum appThemes {
     client = "client",
     specialist = "specialist"
@@ -1599,6 +1612,9 @@ type ThemeProviderProps = {
 
 declare const ThemeProvider: FC<ThemeProviderProps>;
 
+declare const ToastContext: React.Context<ToastState<MindlyToastProps> | undefined>;
+declare function ToastProvider({ children, ...props }: React.PropsWithChildren<ToastProviderProps>): JSX.Element;
+
 declare function useDomRef<T extends HTMLElement = HTMLElement>(ref: React.RefObject<T | null> | React.ForwardedRef<T | null>): React.RefObject<T>;
 
 type AnyFunction = (...args: any[]) => any;
@@ -1615,6 +1631,8 @@ declare function useAutoFocus<T extends InputRefType>(): React.RefObject<T>;
 
 declare function useIsKeyBoardShown(): boolean;
 
+declare function useToastContext(): ToastState<MindlyToastProps>;
+
 interface IconProps$l extends React.SVGAttributes<SVGElement> {
     size?: number | string;
     color?: string;
@@ -1811,4 +1829,4 @@ type SlotsGridProps = {
 
 declare const _default: React__default.NamedExoticComponent<SlotsGridProps>;
 
-export { AppFooter, _default$9 as AppFooter_v2, AppHeader, AppHeader_v2, ArchivedConsultationCard, Avatar, AvatarProps$1 as AvatarProps, _default$8 as Avatar_v2, _default$4 as Badge, _default$n as BookingScheduleTime, _default$m as BookingSpecialistInfo, Button, Button_v2, Calendar, CancelSession, CardModal, ChangeLangModal, ChangeLanguageModal, _default$I as ChatListItem, _default$G as ChatListSkeleton, _default$H as ChatMessage, ChatMessageSkeleton, _default$h as CheckboxList, CheckboxListCategory, CheckboxListItem, CheckboxTypes, ChevronHeader, _default$z as ConsultationCard, ConsultationCardProps, ConsultationCardType, _default$w as ConsultationModal, _default$u as ConsultationSpecialistCard, Container, Container_v2, ContentCard, CountryOfOriginModal, CustomButton, _default$i as CustomCheckbox, CustomRadioButton, _default$j as CustomSelect, _default$k as CustomTextarea, DatePicker, _default$s as DaySlider, DayToRender, _default$o as EducationCard, _default$F as EmptyChatList, EmptyChatMessages, _default$x as EmptyConsultations, EntryNotFound, EntryNotFoundProps, _default$e as Flag, FlagTypes, _default$6 as Flag_v2, FloatingButton, FooterForBooking, FrequentlyAskedQuestions, HorizontalCalendar, HorizontalCalendarProps, ISpecialistReview, IconArrowLeft, IconArrowRight, IconBeachAccess, _default$1 as IconButton, IconCalendar, IconCalendarMonth, IconChatOutline, IconCheckboxChecked, IconCheckboxUnchecked, IconClose, IconEditCalendar, IconInvisible, IconLanguage, IconLeftArrow, IconLogout, IconPause, IconPlus, IconProfileChecked, IconProfileCircle, IconProfileSetting, IconProfileUnderReview, IconResume, IconSettings, IconStar, IconStarFilled, IconSuccess, IconTime, IconVerifiedUser, IconVisible, ImageInput, ImageWithFallback, ImpressionEmojiEnum, Input, LanguagesList, _default$M as LetterAvatar, _default$f as LineFileInput, ListBox, ListBoxItem, ListButton, ListItemType, ListOption, ListSelect, ListSelectProps, LouseConnect, _default$J as MediaPlayer, Modal, ModalCalendar, NavigationBar, NoInternetConnection, NotSupportModal, NotesCardText, NotesEditor, PasswordInput, _default$L as PersonDateTimeCard, _default$5 as Picture, _default$d as ProfileInformation, _default$q as ProfileView, _default$g as ProgressBar, Range, _default$2 as Rating, _default$t as ReSchedule, ReScheduleSuccess, Refresher, ReviewCard, ReviewStatistics, ReviewSwiperSection, RoundButton, RowItemType, RowSelect, RowSelectProps, ScrollTabs, SectionHeading, Segment, SegmentColor, SegmentType, _default$K as SelectImpressionEmoji, _default$y as SignUpSessionButton, _default$v as SignUpSessionModal, Skeleton, _default$7 as Skeleton_v2, _default as SlotsGrid, _default$p as SpecialistAbout, SpecialistCard, _default$D as SpecialistEducationCard, SpecialistLangs, _default$c as SpecialistMatch, _default$C as SpecialistProfileViewCard, _default$b as SpecialistStatistic, SpecialistStatisticsCard, SpecialistWorkDirections, Spinner, StarRating, StatisticsScroll, StatusTag, SuccessScreen, SwitchDeviceCard, TabBar, Tag, _default$l as TextInput, _default$E as Textarea, _default$3 as Textarea_v2, ThemeProvider, ThemeProviderProps, TherapistCard, TherapistInformationComponent, Toast, ToastButton, ToastProps, Toggle, TooltipComponent, _default$a as Typography, TypographyVariantsEnum, UpdatesCard, UserInfoModal, UsersPsychologistScrollList, VerticalCalendar, VerticalCalendarMonthSkeleton, VerticalCalendarSkeleton, _default$A as VideoCallInfo, _default$B as VideoPlayer, _default$r as WorkDirections, YourLocalTimeBlock, appThemes, decOfNum, toast, useAutoFocus, useDomRef, useEvent, useIsKeyBoardShown };
+export { AppFooter, _default$9 as AppFooter_v2, AppHeader, AppHeader_v2, ArchivedConsultationCard, Avatar, AvatarProps$1 as AvatarProps, _default$8 as Avatar_v2, _default$4 as Badge, _default$n as BookingScheduleTime, _default$m as BookingSpecialistInfo, Button, Button_v2, Calendar, CancelSession, CardModal, ChangeLangModal, ChangeLanguageModal, _default$I as ChatListItem, _default$G as ChatListSkeleton, _default$H as ChatMessage, ChatMessageSkeleton, _default$h as CheckboxList, CheckboxListCategory, CheckboxListItem, CheckboxTypes, ChevronHeader, _default$z as ConsultationCard, ConsultationCardProps, ConsultationCardType, _default$w as ConsultationModal, _default$u as ConsultationSpecialistCard, Container, Container_v2, ContentCard, CountryOfOriginModal, CustomButton, _default$i as CustomCheckbox, CustomRadioButton, _default$j as CustomSelect, _default$k as CustomTextarea, DatePicker, _default$s as DaySlider, DayToRender, _default$o as EducationCard, _default$F as EmptyChatList, EmptyChatMessages, _default$x as EmptyConsultations, EntryNotFound, EntryNotFoundProps, _default$e as Flag, FlagTypes, _default$6 as Flag_v2, FloatingButton, FooterForBooking, FrequentlyAskedQuestions, HorizontalCalendar, HorizontalCalendarProps, ISpecialistReview, IconArrowLeft, IconArrowRight, IconBeachAccess, _default$1 as IconButton, IconCalendar, IconCalendarMonth, IconChatOutline, IconCheckboxChecked, IconCheckboxUnchecked, IconClose, IconEditCalendar, IconInvisible, IconLanguage, IconLeftArrow, IconLogout, IconPause, IconPlus, IconProfileChecked, IconProfileCircle, IconProfileSetting, IconProfileUnderReview, IconResume, IconSettings, IconStar, IconStarFilled, IconSuccess, IconTime, IconVerifiedUser, IconVisible, ImageInput, ImageWithFallback, ImpressionEmojiEnum, Input, LanguagesList, _default$M as LetterAvatar, _default$f as LineFileInput, ListBox, ListBoxItem, ListButton, ListItemType, ListOption, ListSelect, ListSelectProps, LouseConnect, _default$J as MediaPlayer, Modal, ModalCalendar, NavigationBar, NoInternetConnection, NotSupportModal, NotesCardText, NotesEditor, PasswordInput, _default$L as PersonDateTimeCard, _default$5 as Picture, _default$d as ProfileInformation, _default$q as ProfileView, _default$g as ProgressBar, Range, _default$2 as Rating, _default$t as ReSchedule, ReScheduleSuccess, Refresher, ReviewCard, ReviewStatistics, ReviewSwiperSection, RoundButton, RowItemType, RowSelect, RowSelectProps, ScrollTabs, SectionHeading, Segment, SegmentColor, SegmentType, _default$K as SelectImpressionEmoji, _default$y as SignUpSessionButton, _default$v as SignUpSessionModal, Skeleton, _default$7 as Skeleton_v2, _default as SlotsGrid, _default$p as SpecialistAbout, SpecialistCard, _default$D as SpecialistEducationCard, SpecialistLangs, _default$c as SpecialistMatch, _default$C as SpecialistProfileViewCard, _default$b as SpecialistStatistic, SpecialistStatisticsCard, SpecialistWorkDirections, Spinner, StarRating, StatisticsScroll, StatusTag, SuccessScreen, SwitchDeviceCard, TabBar, Tag, _default$l as TextInput, _default$E as Textarea, _default$3 as Textarea_v2, ThemeProvider, ThemeProviderProps, TherapistCard, TherapistInformationComponent, Toast, ToastButton, ToastContext, ToastProps, ToastProvider, ToastRegion, Toggle, TooltipComponent, _default$a as Typography, TypographyVariantsEnum, UpdatesCard, UserInfoModal, UsersPsychologistScrollList, VerticalCalendar, VerticalCalendarMonthSkeleton, VerticalCalendarSkeleton, _default$A as VideoCallInfo, _default$B as VideoPlayer, _default$r as WorkDirections, YourLocalTimeBlock, appThemes, decOfNum, toast, useAutoFocus, useDomRef, useEvent, useIsKeyBoardShown, useToastContext };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindly/ui-components",
-  "version": "5.1.1",
+  "version": "5.2.1",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",
@@ -20,6 +20,8 @@
     "@fontsource/inter-tight": "^5.0.12",
     "@ionic/react": "^6.1.11",
     "@ionic/react-router": "^6.1.11",
+    "@react-aria/toast": "^3.0.0-beta.7",
+    "@react-stately/toast": "^3.0.0-beta.1",
     "classnames": "^2.3.2",
     "date-fns": "^2.28.0",
     "html-react-parser": "^3.0.4",

package/src/configs/tailwind/colors.ts

@@ -12,6 +12,15 @@ export default {
         black: 'rgba(var(--color-gray-black) / <alpha-value>)',
       },
     },
+    info: {
+      red: {
+        not: {
+          red: 'rgba(var(--color-info-red-not-red) / <alpha-value>)',
+        },
+      },
+      blue: 'rgba(var(--color-info-blue) / <alpha-value>)',
+    },
+    white: '#ffffff',
   },
   typography: {
     typography: {

package/src/lib2/shared/css/tailwind.css

@@ -11,6 +11,9 @@
 
         --color-gray-black: 33 33 33;
 
+        --color-info-red-not-red: 255 109 71;
+        --color-info-blue: 9 116 255;
+
         /* badge variables start */
         /*  badges attentions */
         --badges-attention-main: 255 153 0;
@@ -35,7 +38,6 @@
         --badges-info-main: 9 116 255;
         --badges-info-bg: 229 241 255;
         /* badge variables end */
-
         --controls-element-unselected: 33 33 33;
         --controls-element-selected: 33 33 33;