@homefile/components-v2 2.14.32 → 2.15.0

package/dist/components/homeAssistant/monitorAlerts/WeatherDetail.d.ts

@@ -0,0 +1,6 @@
+interface WeatherDetailProps {
+    label: string;
+    value?: string | number;
+}
+export declare const WeatherDetail: ({ label, value }: WeatherDetailProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/homeAssistant/monitorAlerts/WeatherDetail.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, VStack } from '@chakra-ui/react';
+export const WeatherDetail = ({ label, value }) => {
+    if (!value)
+        return null; // Não renderiza se o valor for undefined ou null
+    return (_jsxs(VStack, { spacing: "0", align: "start", fontFamily: "secondary", textTransform: "uppercase", children: [_jsx(Text, { fontSize: "xs", lineHeight: "1", children: label }), _jsx(Text, { fontSize: "xs", lineHeight: "1", children: value })] }));
+};

package/dist/components/homeAssistant/monitorAlerts/WeatherWidget.d.ts

@@ -0,0 +1,2 @@
+import { WeatherWidgetI } from '../../../interfaces';
+export declare const WeatherWidget: ({ current, details, forecast, header, }: WeatherWidgetI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeAssistant/monitorAlerts/WeatherWidget.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack, Flex, Text, HStack, VStack, Divider, chakra, } from '@chakra-ui/react';
+import { extractCodeFromUrl } from '../../../utils';
+import { LuSnowflake, LuSun, LuCloudSun, LuCloudy, LuCloud, LuCloudRain, LuCloudLightning, } from 'react-icons/lu';
+import { colors } from '../../../theme/colors';
+const weatherIconMap = {
+    skc: LuSun,
+    few: LuCloudSun,
+    sct: LuCloud,
+    bkn: LuCloudy,
+    ovc: LuCloudy,
+    rain: LuCloudRain,
+    tsra: LuCloudLightning,
+    snow: LuSnowflake,
+};
+export const WeatherWidget = ({ current, details, forecast, header, }) => {
+    return (_jsxs(Stack, { spacing: "base", p: "4", zIndex: "2", children: [_jsxs(Flex, { justify: "space-between", align: "center", children: [_jsx(Text, { fontSize: "sm", fontFamily: "secondary", textTransform: "uppercase", children: header.date }), _jsx(Text, { fontSize: "sm", fontFamily: "secondary", textTransform: "uppercase", children: header.location })] }), _jsxs(Stack, { spacing: "0", align: "end", children: [_jsxs(HStack, { align: "start", spacing: "2", children: [_jsxs(Text, { fontSize: "6xl", fontWeight: "medium", lineHeight: 1, color: "gray.4", children: [current.temp, "\u00B0"] }), getWeatherIcon(current.icon, 50)] }), _jsxs(Text, { fontSize: "md", children: [_jsx(chakra.span, { color: "gray.2", children: "H " }), " ", current.high, "\u00B0 \u00A0", _jsx(chakra.span, { color: "gray.2", children: "L " }), current.low, "\u00B0"] })] }), _jsx(Divider, { borderColor: "gray.2", borderStyle: "dashed" }), _jsxs(Flex, { justify: "space-between", children: [_jsxs(VStack, { spacing: "0", align: "start", children: [_jsx(WeatherDetailText, { children: "Precipitation" }), details.humidity && _jsx(WeatherDetailText, { children: "Humidity" }), _jsx(WeatherDetailText, { children: "Wind" })] }), _jsxs(VStack, { spacing: "0", align: "start", children: [_jsxs(WeatherDetailText, { children: [details.precipitation, "%"] }), details.humidity && (_jsxs(WeatherDetailText, { children: [details.humidity, "%"] })), _jsx(WeatherDetailText, { children: details.wind })] })] }), _jsx(Flex, { justify: "space-between", gap: "1", children: forecast.map((f) => (_jsxs(VStack, { spacing: "0", border: "1px solid", borderColor: "gray.2", borderRadius: "sm", children: [_jsx(Text, { fontFamily: "secondary", textTransform: "uppercase", fontSize: "xxs", color: "gray.2", children: f.day }), _jsx(Divider, { borderColor: "gray.2" }), _jsxs(Stack, { spacing: "0", py: "1", px: "2", align: "center", children: [getWeatherIcon(f.icon, 16, colors.gray[3]), _jsxs(Text, { fontSize: "sm", fontWeight: "medium", mb: "-1", children: [f.high, "\u00B0"] }), _jsxs(WeatherDetailText, { children: ["L ", f.low, "\u00B0"] })] })] }, f.day))) })] }));
+};
+const WeatherDetailText = ({ children }) => {
+    return (_jsx(Text, { fontFamily: "secondary", textTransform: "uppercase", fontSize: "xs", lineHeight: "1.2", children: children }));
+};
+const getWeatherIcon = (iconUrl, size = 48, color = colors.gray[4]) => {
+    const code = extractCodeFromUrl(iconUrl);
+    const IconComponent = weatherIconMap[code] || LuSun;
+    return _jsx(IconComponent, { size: size, color: color });
+};

package/dist/components/homeAssistant/monitorAlerts/index.d.ts

@@ -3,6 +3,7 @@ export * from './AlertHeader';
 export * from './AlertTemplate';
 export * from './AlertTitle';
 export * from './BaseAlertCard';
+export * from './WeatherWidget';
 export * from './HomefileMonitoring';
 export * from './MonitorAlerts';
 export * from './Notifications';

package/dist/components/homeAssistant/monitorAlerts/index.js

@@ -3,6 +3,7 @@ export * from './AlertHeader';
 export * from './AlertTemplate';
 export * from './AlertTitle';
 export * from './BaseAlertCard';
+export * from './WeatherWidget';
 export * from './HomefileMonitoring';
 export * from './MonitorAlerts';
 export * from './Notifications';

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomeMonitor, HomeMonitorSteps, HomeSharedWith, InboxForwardBanner, InboxTile, ItemFormPanel, ItemFormTabs, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, MediaDetailsStep, MessagePanel, MessageChatPanel, MonitorAlerts, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, NotificationsReminder, NotificationsPanel, NotificationCard, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, SkeletonBox, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, ViewContactPanel, VideoPlayer, VideoPlayerModal, WellDone, YtdTile, } from './components';
+export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomeMonitor, HomeMonitorSteps, HomeSharedWith, InboxForwardBanner, InboxTile, ItemFormPanel, ItemFormTabs, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, MediaDetailsStep, MessagePanel, MessageChatPanel, MonitorAlerts, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, NotificationsReminder, NotificationsPanel, NotificationCard, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, SkeletonBox, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, ViewContactPanel, VideoPlayer, VideoPlayerModal, WeatherWidget, WellDone, YtdTile, } from './components';
 export { useCustomToast } from './hooks';
-export { randomColor, mapApiObjectToFormFields } from './utils';
+export { randomColor, mapApiObjectToFormFields, mapForecastToWidget, } from './utils';
 export { Contacts, MagnifyingGlassReport, Message, Register, Receipts, Price, BlueFolderShared, Calendar, Create, Notes, } from './assets/images';
 export { billingProxy, dynamicFormProxy, homeCardProxy, partnerContentProxy, partnerDetailsProxy, paymentMethodProxy, recordsInputsProxy, recordsInputsToDBProxy, userDetailsProxy, confirmAddressProxy, } from './proxies';
 import theme from './theme';

package/dist/index.js

@@ -1,6 +1,6 @@
-export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomeMonitor, HomeMonitorSteps, HomeSharedWith, InboxForwardBanner, InboxTile, ItemFormPanel, ItemFormTabs, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, MediaDetailsStep, MessagePanel, MessageChatPanel, MonitorAlerts, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, NotificationsReminder, NotificationsPanel, NotificationCard, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, SkeletonBox, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, ViewContactPanel, VideoPlayer, VideoPlayerModal, WellDone, YtdTile, } from './components';
+export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomeMonitor, HomeMonitorSteps, HomeSharedWith, InboxForwardBanner, InboxTile, ItemFormPanel, ItemFormTabs, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, MediaDetailsStep, MessagePanel, MessageChatPanel, MonitorAlerts, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, NotificationsReminder, NotificationsPanel, NotificationCard, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, SkeletonBox, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, ViewContactPanel, VideoPlayer, VideoPlayerModal, WeatherWidget, WellDone, YtdTile, } from './components';
 export { useCustomToast } from './hooks';
-export { randomColor, mapApiObjectToFormFields } from './utils';
+export { randomColor, mapApiObjectToFormFields, mapForecastToWidget, } from './utils';
 export { Contacts, MagnifyingGlassReport, Message, Register, Receipts, Price, BlueFolderShared, Calendar, Create, Notes, } from './assets/images';
 export { billingProxy, dynamicFormProxy, homeCardProxy, partnerContentProxy, partnerDetailsProxy, paymentMethodProxy, recordsInputsProxy, recordsInputsToDBProxy, userDetailsProxy, confirmAddressProxy, } from './proxies';
 import theme from './theme';

package/dist/interfaces/homeAssistant/WeatherWidget.interface.d.ts

@@ -0,0 +1,40 @@
+export interface ForecastPeriodI {
+    number: number;
+    name: string;
+    startTime: string;
+    endTime: string;
+    isDaytime: boolean;
+    temperature: number;
+    temperatureUnit: string;
+    probabilityOfPrecipitation: {
+        value: number | null;
+    };
+    windSpeed: string;
+    windDirection: string;
+    icon: string;
+    shortForecast: string;
+    detailedForecast: string;
+}
+export interface WeatherWidgetI {
+    header: {
+        date: string;
+        location: string;
+    };
+    current: {
+        temp: number;
+        icon: string;
+        high: number;
+        low: number;
+    };
+    details: {
+        precipitation: number;
+        humidity?: number;
+        wind: string;
+    };
+    forecast: Array<{
+        day: string;
+        icon: string;
+        high: number;
+        low: number;
+    }>;
+}

package/dist/interfaces/homeAssistant/WeatherWidget.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/interfaces/homeAssistant/index.d.ts

@@ -8,3 +8,4 @@ export * from './HomeAssistantSteps.interface';
 export * from './HomeAssistantTutorial.interface';
 export * from './HomeMonitorSteps.interface';
 export * from './MonitorAlerts.interface';
+export * from './WeatherWidget.interface';

package/dist/interfaces/homeAssistant/index.js

@@ -8,3 +8,4 @@ export * from './HomeAssistantSteps.interface';
 export * from './HomeAssistantTutorial.interface';
 export * from './HomeMonitorSteps.interface';
 export * from './MonitorAlerts.interface';
+export * from './WeatherWidget.interface';

package/dist/mocks/homeAssistant/index.d.ts

@@ -1 +1,2 @@
 export * from './homeAssistantForms';
+export * from './weather';

package/dist/mocks/homeAssistant/index.js

@@ -1 +1,2 @@
 export * from './homeAssistantForms';
+export * from './weather';

package/dist/mocks/homeAssistant/weather.d.ts

@@ -0,0 +1,37 @@
+export declare const weatherDataMock: ({
+    number: number;
+    name: string;
+    startTime: string;
+    endTime: string;
+    isDaytime: boolean;
+    temperature: number;
+    temperatureUnit: string;
+    temperatureTrend: string;
+    probabilityOfPrecipitation: {
+        unitCode: string;
+        value: null;
+    };
+    windSpeed: string;
+    windDirection: string;
+    icon: string;
+    shortForecast: string;
+    detailedForecast: string;
+} | {
+    number: number;
+    name: string;
+    startTime: string;
+    endTime: string;
+    isDaytime: boolean;
+    temperature: number;
+    temperatureUnit: string;
+    temperatureTrend: string;
+    probabilityOfPrecipitation: {
+        unitCode: string;
+        value: number;
+    };
+    windSpeed: string;
+    windDirection: string;
+    icon: string;
+    shortForecast: string;
+    detailedForecast: string;
+})[];

package/dist/mocks/homeAssistant/weather.js

@@ -0,0 +1,268 @@
+export const weatherDataMock = [
+    {
+        number: 1,
+        name: 'This Afternoon',
+        startTime: '2025-05-09T14:00:00-04:00',
+        endTime: '2025-05-09T18:00:00-04:00',
+        isDaytime: true,
+        temperature: 78,
+        temperatureUnit: 'F',
+        temperatureTrend: '',
+        probabilityOfPrecipitation: {
+            unitCode: 'wmoUnit:percent',
+            value: null,
+        },
+        windSpeed: '6 mph',
+        windDirection: 'NW',
+        icon: 'https://api.weather.gov/icons/land/day/sct?size=medium',
+        shortForecast: 'Mostly Sunny',
+        detailedForecast: 'Mostly sunny, with a high near 78. Northwest wind around 6 mph.',
+    },
+    {
+        number: 2,
+        name: 'Tonight',
+        startTime: '2025-05-09T18:00:00-04:00',
+        endTime: '2025-05-10T06:00:00-04:00',
+        isDaytime: false,
+        temperature: 46,
+        temperatureUnit: 'F',
+        temperatureTrend: '',
+        probabilityOfPrecipitation: {
+            unitCode: 'wmoUnit:percent',
+            value: null,
+        },
+        windSpeed: '2 to 6 mph',
+        windDirection: 'N',
+        icon: 'https://api.weather.gov/icons/land/night/bkn?size=medium',
+        shortForecast: 'Mostly Cloudy',
+        detailedForecast: 'Mostly cloudy, with a low around 46. North wind 2 to 6 mph.',
+    },
+    {
+        number: 3,
+        name: 'Saturday',
+        startTime: '2025-05-10T06:00:00-04:00',
+        endTime: '2025-05-10T18:00:00-04:00',
+        isDaytime: true,
+        temperature: 72,
+        temperatureUnit: 'F',
+        temperatureTrend: '',
+        probabilityOfPrecipitation: {
+            unitCode: 'wmoUnit:percent',
+            value: null,
+        },
+        windSpeed: '3 mph',
+        windDirection: 'NE',
+        icon: 'https://api.weather.gov/icons/land/day/bkn?size=medium',
+        shortForecast: 'Mostly Cloudy',
+        detailedForecast: 'Mostly cloudy, with a high near 72. Northeast wind around 3 mph.',
+    },
+    {
+        number: 4,
+        name: 'Saturday Night',
+        startTime: '2025-05-10T18:00:00-04:00',
+        endTime: '2025-05-11T06:00:00-04:00',
+        isDaytime: false,
+        temperature: 52,
+        temperatureUnit: 'F',
+        temperatureTrend: '',
+        probabilityOfPrecipitation: {
+            unitCode: 'wmoUnit:percent',
+            value: 20,
+        },
+        windSpeed: '2 mph',
+        windDirection: 'NE',
+        icon: 'https://api.weather.gov/icons/land/night/rain,20?size=medium',
+        shortForecast: 'Slight Chance Light Rain',
+        detailedForecast: 'A slight chance of rain between 11pm and 5am, then a slight chance of rain showers. Mostly cloudy, with a low around 52. Northeast wind around 2 mph. Chance of precipitation is 20%. New rainfall amounts less than a tenth of an inch possible.',
+    },
+    {
+        number: 5,
+        name: 'Sunday',
+        startTime: '2025-05-11T06:00:00-04:00',
+        endTime: '2025-05-11T18:00:00-04:00',
+        isDaytime: true,
+        temperature: 68,
+        temperatureUnit: 'F',
+        temperatureTrend: '',
+        probabilityOfPrecipitation: {
+            unitCode: 'wmoUnit:percent',
+            value: 30,
+        },
+        windSpeed: '3 to 7 mph',
+        windDirection: 'NE',
+        icon: 'https://api.weather.gov/icons/land/day/rain_showers,20/rain,30?size=medium',
+        shortForecast: 'Chance Rain Showers then Chance Light Rain',
+        detailedForecast: 'A chance of rain showers before 2pm, then a chance of rain between 2pm and 4pm, then a chance of rain showers. Mostly cloudy, with a high near 68. Northeast wind 3 to 7 mph. Chance of precipitation is 30%.',
+    },
+    {
+        number: 6,
+        name: 'Sunday Night',
+        startTime: '2025-05-11T18:00:00-04:00',
+        endTime: '2025-05-12T06:00:00-04:00',
+        isDaytime: false,
+        temperature: 53,
+        temperatureUnit: 'F',
+        temperatureTrend: '',
+        probabilityOfPrecipitation: {
+            unitCode: 'wmoUnit:percent',
+            value: 50,
+        },
+        windSpeed: '6 mph',
+        windDirection: 'ENE',
+        icon: 'https://api.weather.gov/icons/land/night/rain_showers,30/tsra,50?size=medium',
+        shortForecast: 'Chance Rain Showers',
+        detailedForecast: 'A chance of rain showers before 2am, then a chance of showers and thunderstorms. Mostly cloudy, with a low around 53. Chance of precipitation is 50%.',
+    },
+    {
+        number: 7,
+        name: 'Monday',
+        startTime: '2025-05-12T06:00:00-04:00',
+        endTime: '2025-05-12T18:00:00-04:00',
+        isDaytime: true,
+        temperature: 65,
+        temperatureUnit: 'F',
+        temperatureTrend: '',
+        probabilityOfPrecipitation: {
+            unitCode: 'wmoUnit:percent',
+            value: 80,
+        },
+        windSpeed: '8 mph',
+        windDirection: 'ENE',
+        icon: 'https://api.weather.gov/icons/land/day/tsra,70/tsra,80?size=medium',
+        shortForecast: 'Showers And Thunderstorms',
+        detailedForecast: 'Showers and thunderstorms. Mostly cloudy, with a high near 65. Chance of precipitation is 80%.',
+    },
+    {
+        number: 8,
+        name: 'Monday Night',
+        startTime: '2025-05-12T18:00:00-04:00',
+        endTime: '2025-05-13T06:00:00-04:00',
+        isDaytime: false,
+        temperature: 59,
+        temperatureUnit: 'F',
+        temperatureTrend: '',
+        probabilityOfPrecipitation: {
+            unitCode: 'wmoUnit:percent',
+            value: 90,
+        },
+        windSpeed: '7 mph',
+        windDirection: 'E',
+        icon: 'https://api.weather.gov/icons/land/night/tsra,90?size=medium',
+        shortForecast: 'Showers And Thunderstorms',
+        detailedForecast: 'Showers and thunderstorms. Mostly cloudy, with a low around 59. Chance of precipitation is 90%.',
+    },
+    {
+        number: 9,
+        name: 'Tuesday',
+        startTime: '2025-05-13T06:00:00-04:00',
+        endTime: '2025-05-13T18:00:00-04:00',
+        isDaytime: true,
+        temperature: 73,
+        temperatureUnit: 'F',
+        temperatureTrend: '',
+        probabilityOfPrecipitation: {
+            unitCode: 'wmoUnit:percent',
+            value: 90,
+        },
+        windSpeed: '6 mph',
+        windDirection: 'ESE',
+        icon: 'https://api.weather.gov/icons/land/day/tsra,80/tsra,90?size=medium',
+        shortForecast: 'Showers And Thunderstorms',
+        detailedForecast: 'Showers and thunderstorms. Mostly cloudy, with a high near 73. Chance of precipitation is 90%.',
+    },
+    {
+        number: 10,
+        name: 'Tuesday Night',
+        startTime: '2025-05-13T18:00:00-04:00',
+        endTime: '2025-05-14T06:00:00-04:00',
+        isDaytime: false,
+        temperature: 58,
+        temperatureUnit: 'F',
+        temperatureTrend: '',
+        probabilityOfPrecipitation: {
+            unitCode: 'wmoUnit:percent',
+            value: 90,
+        },
+        windSpeed: '1 to 5 mph',
+        windDirection: 'E',
+        icon: 'https://api.weather.gov/icons/land/night/tsra_sct,90/tsra_sct,50?size=medium',
+        shortForecast: 'Showers And Thunderstorms',
+        detailedForecast: 'Showers and thunderstorms. Mostly cloudy, with a low around 58. Chance of precipitation is 90%.',
+    },
+    {
+        number: 11,
+        name: 'Wednesday',
+        startTime: '2025-05-14T06:00:00-04:00',
+        endTime: '2025-05-14T18:00:00-04:00',
+        isDaytime: true,
+        temperature: 79,
+        temperatureUnit: 'F',
+        temperatureTrend: '',
+        probabilityOfPrecipitation: {
+            unitCode: 'wmoUnit:percent',
+            value: 80,
+        },
+        windSpeed: '3 mph',
+        windDirection: 'WSW',
+        icon: 'https://api.weather.gov/icons/land/day/rain_showers,50/tsra_hi,80?size=medium',
+        shortForecast: 'Showers And Thunderstorms',
+        detailedForecast: 'Rain showers likely before 2pm, then showers and thunderstorms. Partly sunny, with a high near 79. Chance of precipitation is 80%.',
+    },
+    {
+        number: 12,
+        name: 'Wednesday Night',
+        startTime: '2025-05-14T18:00:00-04:00',
+        endTime: '2025-05-15T06:00:00-04:00',
+        isDaytime: false,
+        temperature: 58,
+        temperatureUnit: 'F',
+        temperatureTrend: '',
+        probabilityOfPrecipitation: {
+            unitCode: 'wmoUnit:percent',
+            value: 70,
+        },
+        windSpeed: '2 mph',
+        windDirection: 'W',
+        icon: 'https://api.weather.gov/icons/land/night/tsra_hi,70/tsra_hi?size=medium',
+        shortForecast: 'Showers And Thunderstorms Likely',
+        detailedForecast: 'Showers and thunderstorms likely before 1am. Partly cloudy, with a low around 58. Chance of precipitation is 70%.',
+    },
+    {
+        number: 13,
+        name: 'Thursday',
+        startTime: '2025-05-15T06:00:00-04:00',
+        endTime: '2025-05-15T18:00:00-04:00',
+        isDaytime: true,
+        temperature: 85,
+        temperatureUnit: 'F',
+        temperatureTrend: '',
+        probabilityOfPrecipitation: {
+            unitCode: 'wmoUnit:percent',
+            value: 40,
+        },
+        windSpeed: '1 to 5 mph',
+        windDirection: 'W',
+        icon: 'https://api.weather.gov/icons/land/day/few/tsra_hi,40?size=medium',
+        shortForecast: 'Sunny then Chance Showers And Thunderstorms',
+        detailedForecast: 'A slight chance of rain showers between 1pm and 2pm, then a chance of showers and thunderstorms. Sunny, with a high near 85. Chance of precipitation is 40%.',
+    },
+    {
+        number: 14,
+        name: 'Thursday Night',
+        startTime: '2025-05-15T18:00:00-04:00',
+        endTime: '2025-05-16T06:00:00-04:00',
+        isDaytime: false,
+        temperature: 62,
+        temperatureUnit: 'F',
+        temperatureTrend: '',
+        probabilityOfPrecipitation: {
+            unitCode: 'wmoUnit:percent',
+            value: 30,
+        },
+        windSpeed: '3 mph',
+        windDirection: 'W',
+        icon: 'https://api.weather.gov/icons/land/night/tsra_hi,30/sct?size=medium',
+        shortForecast: 'Chance Showers And Thunderstorms then Partly Cloudy',
+        detailedForecast: 'A chance of showers and thunderstorms before 11pm. Partly cloudy, with a low around 62. Chance of precipitation is 30%.',
+    },
+];

package/dist/stories/homeAssistant/HomeMonitor.stories.js

@@ -1,18 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { HomefileMonitoring, HomeMonitor, HomeMonitorSteps, Notifications, } from '../../components';
+import { HomefileMonitoring, HomeMonitor, HomeMonitorSteps, WeatherWidget, } from '../../components';
 import { Box, Flex, Stack } from '@chakra-ui/react';
 import { action } from '@storybook/addon-actions';
-import { menuMock } from '../../mocks';
+import { menuMock, weatherDataMock } from '../../mocks';
+import { mapForecastToWidget } from '../../utils';
 export default {
     title: 'Components/HomeAssistant',
     component: HomeMonitor,
     decorators: [
-        (Story) => (_jsx(Box, { p: "base", w: ['full', '669px'], h: "477px", children: _jsx(Story, {}) })),
+        (Story) => (_jsx(Box, { p: "base", w: ['full', '800px'], h: "fit-content", children: _jsx(Story, {}) })),
     ],
 };
 export const HomeMonitorComponent = () => {
     const handleAlertClick = (step) => {
         action('onStepClick')(step);
     };
-    return (_jsx(HomeMonitor, { children: _jsxs(Stack, { spacing: "base", children: [_jsxs(Flex, { gap: "base", children: [_jsx(HomefileMonitoring, {}), _jsx(Notifications, { date: "10-10-24", local: "TX - Houston" })] }), _jsx(HomeMonitorSteps, { menuItems: menuMock, stepsWithAlerts: [], onStepClick: handleAlertClick })] }) }));
+    const weatherData = mapForecastToWidget(weatherDataMock, 'TX, Houston');
+    return (_jsx(HomeMonitor, { children: _jsxs(Stack, { spacing: "base", children: [_jsxs(Flex, { gap: "base", children: [_jsx(HomefileMonitoring, {}), _jsx(WeatherWidget, Object.assign({}, weatherData))] }), _jsx(HomeMonitorSteps, { menuItems: menuMock, stepsWithAlerts: [], onStepClick: handleAlertClick })] }) }));
 };

package/dist/utils/Weather.utils.d.ts

@@ -0,0 +1,3 @@
+import { ForecastPeriodI, WeatherWidgetI } from '../interfaces';
+export declare function mapForecastToWidget(periods: ForecastPeriodI[], location: string): WeatherWidgetI;
+export declare function extractCodeFromUrl(iconUrl: string): string;

package/dist/utils/Weather.utils.js

@@ -0,0 +1,60 @@
+import { parseISO, format } from 'date-fns';
+export function mapForecastToWidget(periods, location) {
+    var _a, _b, _c, _d;
+    if (!periods.length) {
+        throw new Error('Nenhum período disponível para mapping');
+    }
+    // --- HEADER DATE ---
+    const todayDate = parseISO(periods[0].startTime);
+    const headerDate = format(todayDate, 'EEEE, MMMM do')
+        .toUpperCase()
+        .replace(',', '');
+    // --- CURRENT CONDITIONS ---
+    const day0 = (_a = periods.find((p) => p.isDaytime)) !== null && _a !== void 0 ? _a : periods[0];
+    const night0 = (_c = (_b = periods.find((p) => !p.isDaytime &&
+        format(parseISO(p.startTime), 'yyyy-MM-dd') ===
+            format(parseISO(day0.startTime), 'yyyy-MM-dd'))) !== null && _b !== void 0 ? _b : periods.find((p) => !p.isDaytime)) !== null && _c !== void 0 ? _c : day0;
+    console.log({ night0 });
+    const currentTemp = day0.temperature;
+    const currentIcon = day0.icon;
+    const highTemp = day0.temperature;
+    const lowTemp = night0.temperature;
+    // --- DETAILS ---
+    const precipitation = (_d = day0.probabilityOfPrecipitation.value) !== null && _d !== void 0 ? _d : 0;
+    const wind = `${day0.windDirection} ${day0.windSpeed}`;
+    const humidity = undefined;
+    // --- 5-DAY FORECAST ---
+    const dayPeriods = periods.filter((p) => p.isDaytime).slice(1, 6);
+    const forecast = dayPeriods.map((p) => {
+        var _a;
+        const night = periods.find((n) => !n.isDaytime &&
+            format(parseISO(n.startTime), 'yyyy-MM-dd') ===
+                format(parseISO(p.startTime), 'yyyy-MM-dd'));
+        const low = (_a = night === null || night === void 0 ? void 0 : night.temperature) !== null && _a !== void 0 ? _a : p.temperature;
+        const icon = p.icon;
+        const day = format(parseISO(p.startTime), 'EEE').toUpperCase(); // "TUE"
+        return { day, icon, high: p.temperature, low };
+    });
+    return {
+        header: { date: headerDate, location },
+        current: {
+            temp: currentTemp,
+            icon: currentIcon,
+            high: highTemp,
+            low: lowTemp,
+        },
+        details: { precipitation, humidity, wind },
+        forecast,
+    };
+}
+export function extractCodeFromUrl(iconUrl) {
+    try {
+        const parsed = new URL(iconUrl);
+        const segments = parsed.pathname.split('/');
+        const raw = segments[segments.length - 1] || '';
+        return raw.split(',')[0].toLowerCase();
+    }
+    catch (_a) {
+        return '';
+    }
+}

package/dist/utils/index.d.ts

@@ -15,3 +15,4 @@ export * from './ShowingText.utils';
 export * from './Styles.utils';
 export * from './Validations.utils';
 export * from './ViewPort.utils';
+export * from './Weather.utils';

package/dist/utils/index.js

@@ -15,3 +15,4 @@ export * from './ShowingText.utils';
 export * from './Styles.utils';
 export * from './Validations.utils';
 export * from './ViewPort.utils';
+export * from './Weather.utils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.14.32",
+  "version": "2.15.0",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",

package/src/components/homeAssistant/monitorAlerts/WeatherDetail.tsx

@@ -0,0 +1,26 @@
+import { Text, VStack } from '@chakra-ui/react'
+
+interface WeatherDetailProps {
+  label: string
+  value?: string | number
+}
+
+export const WeatherDetail = ({ label, value }: WeatherDetailProps) => {
+  if (!value) return null // Não renderiza se o valor for undefined ou null
+
+  return (
+    <VStack
+      spacing="0"
+      align="start"
+      fontFamily="secondary"
+      textTransform="uppercase"
+    >
+      <Text fontSize="xs" lineHeight="1">
+        {label}
+      </Text>
+      <Text fontSize="xs" lineHeight="1">
+        {value}
+      </Text>
+    </VStack>
+  )
+}

package/src/components/homeAssistant/monitorAlerts/WeatherWidget.tsx

@@ -0,0 +1,141 @@
+import { PropsWithChildren } from 'react'
+import { WeatherWidgetI } from '@/interfaces'
+import {
+  Stack,
+  Flex,
+  Box,
+  Text,
+  HStack,
+  VStack,
+  Divider,
+  chakra,
+} from '@chakra-ui/react'
+import { extractCodeFromUrl } from '@/utils'
+import {
+  LuSnowflake,
+  LuSun,
+  LuCloudSun,
+  LuCloudy,
+  LuCloud,
+  LuCloudRain,
+  LuCloudLightning,
+} from 'react-icons/lu'
+import { colors } from '@/theme/colors'
+
+const weatherIconMap: Record<
+  string,
+  React.FC<{ size?: number; color?: string }>
+> = {
+  skc: LuSun,
+  few: LuCloudSun,
+  sct: LuCloud,
+  bkn: LuCloudy,
+  ovc: LuCloudy,
+  rain: LuCloudRain,
+  tsra: LuCloudLightning,
+  snow: LuSnowflake,
+}
+
+export const WeatherWidget = ({
+  current,
+  details,
+  forecast,
+  header,
+}: WeatherWidgetI) => {
+  return (
+    <Stack spacing="base" p="4" zIndex="2">
+      <Flex justify="space-between" align="center">
+        <Text fontSize="sm" fontFamily="secondary" textTransform="uppercase">
+          {header.date}
+        </Text>
+        <Text fontSize="sm" fontFamily="secondary" textTransform="uppercase">
+          {header.location}
+        </Text>
+      </Flex>
+
+      <Stack spacing="0" align="end">
+        <HStack align="start" spacing="2">
+          <Text
+            fontSize="6xl"
+            fontWeight="medium"
+            lineHeight={1}
+            color="gray.4"
+          >
+            {current.temp}°
+          </Text>
+          {getWeatherIcon(current.icon, 50)}
+        </HStack>
+        <Text fontSize="md">
+          <chakra.span color="gray.2">H </chakra.span> {current.high}° &nbsp;
+          <chakra.span color="gray.2">L </chakra.span>
+          {current.low}°
+        </Text>
+      </Stack>
+
+      <Divider borderColor="gray.2" borderStyle="dashed" />
+
+      <Flex justify="space-between">
+        <VStack spacing="0" align="start">
+          <WeatherDetailText>Precipitation</WeatherDetailText>
+          {details.humidity && <WeatherDetailText>Humidity</WeatherDetailText>}
+          <WeatherDetailText>Wind</WeatherDetailText>
+        </VStack>
+        <VStack spacing="0" align="start">
+          <WeatherDetailText>{details.precipitation}%</WeatherDetailText>
+          {details.humidity && (
+            <WeatherDetailText>{details.humidity}%</WeatherDetailText>
+          )}
+          <WeatherDetailText>{details.wind}</WeatherDetailText>
+        </VStack>
+      </Flex>
+
+      <Flex justify="space-between" gap="1">
+        {forecast.map((f) => (
+          <VStack
+            key={f.day}
+            spacing="0"
+            border="1px solid"
+            borderColor="gray.2"
+            borderRadius="sm"
+          >
+            <Text
+              fontFamily="secondary"
+              textTransform="uppercase"
+              fontSize="xxs"
+              color="gray.2"
+            >
+              {f.day}
+            </Text>
+            <Divider borderColor="gray.2" />
+            <Stack spacing="0" py="1" px="2" align="center">
+              {getWeatherIcon(f.icon, 16, colors.gray[3])}
+              <Text fontSize="sm" fontWeight="medium" mb="-1">
+                {f.high}°
+              </Text>
+              <WeatherDetailText>L {f.low}°</WeatherDetailText>
+            </Stack>
+          </VStack>
+        ))}
+      </Flex>
+    </Stack>
+  )
+}
+
+const WeatherDetailText = ({ children }: PropsWithChildren) => {
+  return (
+    <Text
+      fontFamily="secondary"
+      textTransform="uppercase"
+      fontSize="xs"
+      lineHeight="1.2"
+    >
+      {children}
+    </Text>
+  )
+}
+
+const getWeatherIcon = (iconUrl: string, size = 48, color = colors.gray[4]) => {
+  const code = extractCodeFromUrl(iconUrl)
+  const IconComponent = weatherIconMap[code] || LuSun
+  return <IconComponent size={size} color={color} />
+}

package/src/components/homeAssistant/monitorAlerts/index.ts

@@ -3,6 +3,7 @@ export * from './AlertHeader'
 export * from './AlertTemplate'
 export * from './AlertTitle'
 export * from './BaseAlertCard'
+export * from './WeatherWidget'
 export * from './HomefileMonitoring'
 export * from './MonitorAlerts'
 export * from './Notifications'

package/src/index.ts

@@ -206,13 +206,18 @@ export {
   ViewContactPanel,
   VideoPlayer,
   VideoPlayerModal,
+  WeatherWidget,
   WellDone,
   YtdTile,
 } from './components'
 
 export { useCustomToast } from './hooks'
 
-export { randomColor, mapApiObjectToFormFields } from './utils'
+export {
+  randomColor,
+  mapApiObjectToFormFields,
+  mapForecastToWidget,
+} from './utils'
 
 export {
   Contacts,

package/src/interfaces/homeAssistant/WeatherWidget.interface.ts

@@ -0,0 +1,39 @@
+export interface ForecastPeriodI {
+  number: number
+  name: string
+  startTime: string
+  endTime: string
+  isDaytime: boolean
+  temperature: number
+  temperatureUnit: string
+  probabilityOfPrecipitation: { value: number | null }
+  windSpeed: string
+  windDirection: string
+  icon: string
+  shortForecast: string
+  detailedForecast: string
+}
+
+export interface WeatherWidgetI {
+  header: {
+    date: string
+    location: string
+  }
+  current: {
+    temp: number
+    icon: string
+    high: number
+    low: number
+  }
+  details: {
+    precipitation: number
+    humidity?: number
+    wind: string
+  }
+  forecast: Array<{
+    day: string
+    icon: string
+    high: number
+    low: number
+  }>
+}

package/src/interfaces/homeAssistant/index.ts

@@ -8,3 +8,4 @@ export * from './HomeAssistantSteps.interface'
 export * from './HomeAssistantTutorial.interface'
 export * from './HomeMonitorSteps.interface'
 export * from './MonitorAlerts.interface'
+export * from './WeatherWidget.interface'

package/src/mocks/homeAssistant/index.ts

@@ -1 +1,2 @@
 export * from './homeAssistantForms'
+export * from './weather'

package/src/mocks/homeAssistant/weather.ts

@@ -0,0 +1,282 @@
+export const weatherDataMock = [
+  {
+    number: 1,
+    name: 'This Afternoon',
+    startTime: '2025-05-09T14:00:00-04:00',
+    endTime: '2025-05-09T18:00:00-04:00',
+    isDaytime: true,
+    temperature: 78,
+    temperatureUnit: 'F',
+    temperatureTrend: '',
+    probabilityOfPrecipitation: {
+      unitCode: 'wmoUnit:percent',
+      value: null,
+    },
+    windSpeed: '6 mph',
+    windDirection: 'NW',
+    icon: 'https://api.weather.gov/icons/land/day/sct?size=medium',
+    shortForecast: 'Mostly Sunny',
+    detailedForecast:
+      'Mostly sunny, with a high near 78. Northwest wind around 6 mph.',
+  },
+  {
+    number: 2,
+    name: 'Tonight',
+    startTime: '2025-05-09T18:00:00-04:00',
+    endTime: '2025-05-10T06:00:00-04:00',
+    isDaytime: false,
+    temperature: 46,
+    temperatureUnit: 'F',
+    temperatureTrend: '',
+    probabilityOfPrecipitation: {
+      unitCode: 'wmoUnit:percent',
+      value: null,
+    },
+    windSpeed: '2 to 6 mph',
+    windDirection: 'N',
+    icon: 'https://api.weather.gov/icons/land/night/bkn?size=medium',
+    shortForecast: 'Mostly Cloudy',
+    detailedForecast:
+      'Mostly cloudy, with a low around 46. North wind 2 to 6 mph.',
+  },
+  {
+    number: 3,
+    name: 'Saturday',
+    startTime: '2025-05-10T06:00:00-04:00',
+    endTime: '2025-05-10T18:00:00-04:00',
+    isDaytime: true,
+    temperature: 72,
+    temperatureUnit: 'F',
+    temperatureTrend: '',
+    probabilityOfPrecipitation: {
+      unitCode: 'wmoUnit:percent',
+      value: null,
+    },
+    windSpeed: '3 mph',
+    windDirection: 'NE',
+    icon: 'https://api.weather.gov/icons/land/day/bkn?size=medium',
+    shortForecast: 'Mostly Cloudy',
+    detailedForecast:
+      'Mostly cloudy, with a high near 72. Northeast wind around 3 mph.',
+  },
+  {
+    number: 4,
+    name: 'Saturday Night',
+    startTime: '2025-05-10T18:00:00-04:00',
+    endTime: '2025-05-11T06:00:00-04:00',
+    isDaytime: false,
+    temperature: 52,
+    temperatureUnit: 'F',
+    temperatureTrend: '',
+    probabilityOfPrecipitation: {
+      unitCode: 'wmoUnit:percent',
+      value: 20,
+    },
+    windSpeed: '2 mph',
+    windDirection: 'NE',
+    icon: 'https://api.weather.gov/icons/land/night/rain,20?size=medium',
+    shortForecast: 'Slight Chance Light Rain',
+    detailedForecast:
+      'A slight chance of rain between 11pm and 5am, then a slight chance of rain showers. Mostly cloudy, with a low around 52. Northeast wind around 2 mph. Chance of precipitation is 20%. New rainfall amounts less than a tenth of an inch possible.',
+  },
+  {
+    number: 5,
+    name: 'Sunday',
+    startTime: '2025-05-11T06:00:00-04:00',
+    endTime: '2025-05-11T18:00:00-04:00',
+    isDaytime: true,
+    temperature: 68,
+    temperatureUnit: 'F',
+    temperatureTrend: '',
+    probabilityOfPrecipitation: {
+      unitCode: 'wmoUnit:percent',
+      value: 30,
+    },
+    windSpeed: '3 to 7 mph',
+    windDirection: 'NE',
+    icon: 'https://api.weather.gov/icons/land/day/rain_showers,20/rain,30?size=medium',
+    shortForecast: 'Chance Rain Showers then Chance Light Rain',
+    detailedForecast:
+      'A chance of rain showers before 2pm, then a chance of rain between 2pm and 4pm, then a chance of rain showers. Mostly cloudy, with a high near 68. Northeast wind 3 to 7 mph. Chance of precipitation is 30%.',
+  },
+  {
+    number: 6,
+    name: 'Sunday Night',
+    startTime: '2025-05-11T18:00:00-04:00',
+    endTime: '2025-05-12T06:00:00-04:00',
+    isDaytime: false,
+    temperature: 53,
+    temperatureUnit: 'F',
+    temperatureTrend: '',
+    probabilityOfPrecipitation: {
+      unitCode: 'wmoUnit:percent',
+      value: 50,
+    },
+    windSpeed: '6 mph',
+    windDirection: 'ENE',
+    icon: 'https://api.weather.gov/icons/land/night/rain_showers,30/tsra,50?size=medium',
+    shortForecast: 'Chance Rain Showers',
+    detailedForecast:
+      'A chance of rain showers before 2am, then a chance of showers and thunderstorms. Mostly cloudy, with a low around 53. Chance of precipitation is 50%.',
+  },
+  {
+    number: 7,
+    name: 'Monday',
+    startTime: '2025-05-12T06:00:00-04:00',
+    endTime: '2025-05-12T18:00:00-04:00',
+    isDaytime: true,
+    temperature: 65,
+    temperatureUnit: 'F',
+    temperatureTrend: '',
+    probabilityOfPrecipitation: {
+      unitCode: 'wmoUnit:percent',
+      value: 80,
+    },
+    windSpeed: '8 mph',
+    windDirection: 'ENE',
+    icon: 'https://api.weather.gov/icons/land/day/tsra,70/tsra,80?size=medium',
+    shortForecast: 'Showers And Thunderstorms',
+    detailedForecast:
+      'Showers and thunderstorms. Mostly cloudy, with a high near 65. Chance of precipitation is 80%.',
+  },
+  {
+    number: 8,
+    name: 'Monday Night',
+    startTime: '2025-05-12T18:00:00-04:00',
+    endTime: '2025-05-13T06:00:00-04:00',
+    isDaytime: false,
+    temperature: 59,
+    temperatureUnit: 'F',
+    temperatureTrend: '',
+    probabilityOfPrecipitation: {
+      unitCode: 'wmoUnit:percent',
+      value: 90,
+    },
+    windSpeed: '7 mph',
+    windDirection: 'E',
+    icon: 'https://api.weather.gov/icons/land/night/tsra,90?size=medium',
+    shortForecast: 'Showers And Thunderstorms',
+    detailedForecast:
+      'Showers and thunderstorms. Mostly cloudy, with a low around 59. Chance of precipitation is 90%.',
+  },
+  {
+    number: 9,
+    name: 'Tuesday',
+    startTime: '2025-05-13T06:00:00-04:00',
+    endTime: '2025-05-13T18:00:00-04:00',
+    isDaytime: true,
+    temperature: 73,
+    temperatureUnit: 'F',
+    temperatureTrend: '',
+    probabilityOfPrecipitation: {
+      unitCode: 'wmoUnit:percent',
+      value: 90,
+    },
+    windSpeed: '6 mph',
+    windDirection: 'ESE',
+    icon: 'https://api.weather.gov/icons/land/day/tsra,80/tsra,90?size=medium',
+    shortForecast: 'Showers And Thunderstorms',
+    detailedForecast:
+      'Showers and thunderstorms. Mostly cloudy, with a high near 73. Chance of precipitation is 90%.',
+  },
+  {
+    number: 10,
+    name: 'Tuesday Night',
+    startTime: '2025-05-13T18:00:00-04:00',
+    endTime: '2025-05-14T06:00:00-04:00',
+    isDaytime: false,
+    temperature: 58,
+    temperatureUnit: 'F',
+    temperatureTrend: '',
+    probabilityOfPrecipitation: {
+      unitCode: 'wmoUnit:percent',
+      value: 90,
+    },
+    windSpeed: '1 to 5 mph',
+    windDirection: 'E',
+    icon: 'https://api.weather.gov/icons/land/night/tsra_sct,90/tsra_sct,50?size=medium',
+    shortForecast: 'Showers And Thunderstorms',
+    detailedForecast:
+      'Showers and thunderstorms. Mostly cloudy, with a low around 58. Chance of precipitation is 90%.',
+  },
+  {
+    number: 11,
+    name: 'Wednesday',
+    startTime: '2025-05-14T06:00:00-04:00',
+    endTime: '2025-05-14T18:00:00-04:00',
+    isDaytime: true,
+    temperature: 79,
+    temperatureUnit: 'F',
+    temperatureTrend: '',
+    probabilityOfPrecipitation: {
+      unitCode: 'wmoUnit:percent',
+      value: 80,
+    },
+    windSpeed: '3 mph',
+    windDirection: 'WSW',
+    icon: 'https://api.weather.gov/icons/land/day/rain_showers,50/tsra_hi,80?size=medium',
+    shortForecast: 'Showers And Thunderstorms',
+    detailedForecast:
+      'Rain showers likely before 2pm, then showers and thunderstorms. Partly sunny, with a high near 79. Chance of precipitation is 80%.',
+  },
+  {
+    number: 12,
+    name: 'Wednesday Night',
+    startTime: '2025-05-14T18:00:00-04:00',
+    endTime: '2025-05-15T06:00:00-04:00',
+    isDaytime: false,
+    temperature: 58,
+    temperatureUnit: 'F',
+    temperatureTrend: '',
+    probabilityOfPrecipitation: {
+      unitCode: 'wmoUnit:percent',
+      value: 70,
+    },
+    windSpeed: '2 mph',
+    windDirection: 'W',
+    icon: 'https://api.weather.gov/icons/land/night/tsra_hi,70/tsra_hi?size=medium',
+    shortForecast: 'Showers And Thunderstorms Likely',
+    detailedForecast:
+      'Showers and thunderstorms likely before 1am. Partly cloudy, with a low around 58. Chance of precipitation is 70%.',
+  },
+  {
+    number: 13,
+    name: 'Thursday',
+    startTime: '2025-05-15T06:00:00-04:00',
+    endTime: '2025-05-15T18:00:00-04:00',
+    isDaytime: true,
+    temperature: 85,
+    temperatureUnit: 'F',
+    temperatureTrend: '',
+    probabilityOfPrecipitation: {
+      unitCode: 'wmoUnit:percent',
+      value: 40,
+    },
+    windSpeed: '1 to 5 mph',
+    windDirection: 'W',
+    icon: 'https://api.weather.gov/icons/land/day/few/tsra_hi,40?size=medium',
+    shortForecast: 'Sunny then Chance Showers And Thunderstorms',
+    detailedForecast:
+      'A slight chance of rain showers between 1pm and 2pm, then a chance of showers and thunderstorms. Sunny, with a high near 85. Chance of precipitation is 40%.',
+  },
+  {
+    number: 14,
+    name: 'Thursday Night',
+    startTime: '2025-05-15T18:00:00-04:00',
+    endTime: '2025-05-16T06:00:00-04:00',
+    isDaytime: false,
+    temperature: 62,
+    temperatureUnit: 'F',
+    temperatureTrend: '',
+    probabilityOfPrecipitation: {
+      unitCode: 'wmoUnit:percent',
+      value: 30,
+    },
+    windSpeed: '3 mph',
+    windDirection: 'W',
+    icon: 'https://api.weather.gov/icons/land/night/tsra_hi,30/sct?size=medium',
+    shortForecast: 'Chance Showers And Thunderstorms then Partly Cloudy',
+    detailedForecast:
+      'A chance of showers and thunderstorms before 11pm. Partly cloudy, with a low around 62. Chance of precipitation is 30%.',
+  },
+]

package/src/stories/homeAssistant/HomeMonitor.stories.tsx

@@ -4,17 +4,19 @@ import {
   HomeMonitor,
   HomeMonitorSteps,
   Notifications,
+  WeatherWidget,
 } from '@/components'
 import { Box, Flex, Stack } from '@chakra-ui/react'
 import { action } from '@storybook/addon-actions'
-import { menuMock } from '@/mocks'
+import { menuMock, weatherDataMock } from '@/mocks'
+import { mapForecastToWidget } from '@/utils'
 
 export default {
   title: 'Components/HomeAssistant',
   component: HomeMonitor,
   decorators: [
     (Story: any) => (
-      <Box p="base" w={['full', '669px']} h="477px">
+      <Box p="base" w={['full', '800px']} h="fit-content">
         <Story />
       </Box>
     ),
@@ -25,12 +27,13 @@ export const HomeMonitorComponent = () => {
   const handleAlertClick = (step: number) => {
     action('onStepClick')(step)
   }
+  const weatherData = mapForecastToWidget(weatherDataMock, 'TX, Houston')
   return (
     <HomeMonitor>
       <Stack spacing="base">
         <Flex gap="base">
           <HomefileMonitoring />
-          <Notifications date="10-10-24" local="TX - Houston" />
+          <WeatherWidget {...weatherData} />
         </Flex>
         <HomeMonitorSteps
           menuItems={menuMock}

package/src/utils/Weather.utils.ts

@@ -0,0 +1,81 @@
+import { parseISO, format } from 'date-fns'
+import { ForecastPeriodI, WeatherWidgetI } from '@/interfaces'
+
+export function mapForecastToWidget(
+  periods: ForecastPeriodI[],
+  location: string
+): WeatherWidgetI {
+  if (!periods.length) {
+    throw new Error('Nenhum período disponível para mapping')
+  }
+
+  // --- HEADER DATE ---
+  const todayDate = parseISO(periods[0].startTime)
+  const headerDate = format(todayDate, 'EEEE, MMMM do')
+    .toUpperCase()
+    .replace(',', '')
+
+  // --- CURRENT CONDITIONS ---
+  const day0 = periods.find((p) => p.isDaytime) ?? periods[0]
+  const night0 =
+    periods.find(
+      (p) =>
+        !p.isDaytime &&
+        format(parseISO(p.startTime), 'yyyy-MM-dd') ===
+          format(parseISO(day0.startTime), 'yyyy-MM-dd')
+    ) ??
+    periods.find((p) => !p.isDaytime) ??
+    day0
+
+  console.log({ night0 })
+
+  const currentTemp = day0.temperature
+  const currentIcon = day0.icon
+  const highTemp = day0.temperature
+  const lowTemp = night0.temperature
+
+  // --- DETAILS ---
+  const precipitation = day0.probabilityOfPrecipitation.value ?? 0
+  const wind = `${day0.windDirection} ${day0.windSpeed}`
+
+  const humidity = undefined
+
+  // --- 5-DAY FORECAST ---
+  const dayPeriods = periods.filter((p) => p.isDaytime).slice(1, 6)
+
+  const forecast = dayPeriods.map((p) => {
+    const night = periods.find(
+      (n) =>
+        !n.isDaytime &&
+        format(parseISO(n.startTime), 'yyyy-MM-dd') ===
+          format(parseISO(p.startTime), 'yyyy-MM-dd')
+    )
+    const low = night?.temperature ?? p.temperature
+    const icon = p.icon
+    const day = format(parseISO(p.startTime), 'EEE').toUpperCase() // "TUE"
+    return { day, icon, high: p.temperature, low }
+  })
+
+  return {
+    header: { date: headerDate, location },
+    current: {
+      temp: currentTemp,
+      icon: currentIcon,
+      high: highTemp,
+      low: lowTemp,
+    },
+    details: { precipitation, humidity, wind },
+    forecast,
+  }
+}
+
+export function extractCodeFromUrl(iconUrl: string): string {
+  try {
+    const parsed = new URL(iconUrl)
+    const segments = parsed.pathname.split('/')
+    const raw = segments[segments.length - 1] || ''
+    return raw.split(',')[0].toLowerCase()
+  } catch {
+    return ''
+  }
+}

package/src/utils/index.ts

@@ -15,3 +15,4 @@ export * from './ShowingText.utils'
 export * from './Styles.utils'
 export * from './Validations.utils'
 export * from './ViewPort.utils'
+export * from './Weather.utils'