componentes-sinco 1.1.3 → 1.1.4

package/dist/index.d.cts

@@ -429,7 +429,7 @@ interface SCDialogProps {
 }
 declare const SCDialog: ({ title, iconTitle, subtitle, content, actions, buttonDialog, disableClose, dividers, widthContent, heightContent, background, typeView, setShow, show }: SCDialogProps) => React__default.JSX.Element;
 
-interface Option$2 {
+interface Option$3 {
     title?: string;
     subtitle?: any;
     description?: any;
@@ -443,13 +443,13 @@ interface Option$2 {
     fn?: any;
 }
 interface SCListContentProps {
-    options: Option$2[];
+    options: Option$3[];
     iconLeftType?: "Icon" | "Avatar";
     iconRightType?: "Icon" | "Avatar";
 }
 declare const SCListContent: ({ options, iconLeftType, iconRightType }: SCListContentProps) => React__default.JSX.Element;
 
-interface Option$1 {
+interface Option$2 {
     name?: string;
     iconLeft?: any | React__default.ReactNode | React__default.ReactElement | React__default.ElementType | null;
     iconRight?: any | React__default.ReactNode | React__default.ReactElement | React__default.ElementType | null;
@@ -458,7 +458,7 @@ interface Option$1 {
 }
 interface SCMenuProps {
     header?: any;
-    options: Option$1[];
+    options: Option$2[];
     defaultOption?: string;
     disable?: boolean;
     widthMenu?: string;
@@ -507,14 +507,14 @@ interface SCSelectProps<T> {
 }
 declare function SCSelect<T>({ label, data, getItemValue, width, size, variant, background, required, disabled, setState, state, }: SCSelectProps<T>): React__default.JSX.Element;
 
-interface Option {
+interface Option$1 {
     name?: string;
     iconOrBadge: string | number | null | undefined | any | React__default.ReactNode | React__default.ReactElement | React__default.ElementType;
     disabled?: boolean;
     page: React__default.ReactNode | React__default.ReactElement;
 }
 interface SCTabsProps {
-    options: Option[];
+    options: Option$1[];
     defaultOption?: string;
     typeIcon?: "badge" | "icon";
     background?: string;
@@ -677,8 +677,25 @@ interface SCSnackBarProps {
 }
 declare const SCSnackBar: ({ type, close, openState, setOpenState, mensaje, duration, position }: SCSnackBarProps) => React__default.JSX.Element;
 
+interface Option {
+    name: string;
+    fn?: () => void;
+    disabled?: boolean;
+}
+interface SCAppBarProps {
+    background?: string;
+    contenidoExtra?: React__default.ReactNode;
+    menuItems?: React__default.ReactNode;
+    options: Option[];
+    fnVolver?: () => void;
+    visibleVolver?: boolean;
+    visibleConexion?: boolean;
+    visibleMenu?: boolean;
+}
+declare const SCAppBar: ({ background, contenidoExtra, options, fnVolver, visibleVolver, visibleConexion, visibleMenu, }: SCAppBarProps) => React__default.JSX.Element;
+
 declare const SincoTheme: _mui_material_styles.Theme;
 declare let AdproSincoTheme: _mui_material_styles.Theme;
 declare let ADCSincoTheme: _mui_material_styles.Theme;
 
-export { ADCSincoTheme, AdproSincoTheme, Attachment, AttachmentMobile, BasicMenu, type BasicMenuProps, CALENDAR_CONSTANTS, Calendar, type CalendarEvent, type CalendarProps, type CalendarView, type CellBorderType, DayEventsList, EmptyState, type EmptyStateProperties, type EmptyStateSize, type EmptyStateStates, type EventState, FooterAction, type FooterActionsProperties, type ModalProps, type ModalStates, MultiSelect, type MultiSelectProps, type NavigationAction, PageHeader, type PageheaderProperties, type ReplyButtonVariants, type ReplyPalette$1 as ReplyPalette, type ReplyTextPalette, type ReplyVariants, type RepplyAnchorPositions, type RepplySizeVariants, SCActivityCalendar, SCAutocomplete, SCCalendarSwipeable, SCCard, SCDataGrid, SCDataGridInitial, SCDateRange, SCDialog, SCDrawer, SCListContent, SCMenu, SCModal, SCSelect, SCSnackBar, SCTabs, SCTextArea, type SCTextAreaProps, SCTextField, type SCTextFieldProps, SCTime, SCToastNotification, SincoTheme, type ToastBaseProperties, ToastProgress, type ToastType, capitalize, clampEventToVisibleRange, filterEventsForDay, getButtonColor, getCellBorderType, getIcon, getIconComponent, getIconMultiSelect, getModalColor, modalStateConfig, useCalendarNavigation, useFilteredItems, useMultiSelectHandlers, useProgress };
+export { ADCSincoTheme, AdproSincoTheme, Attachment, AttachmentMobile, BasicMenu, type BasicMenuProps, CALENDAR_CONSTANTS, Calendar, type CalendarEvent, type CalendarProps, type CalendarView, type CellBorderType, DayEventsList, EmptyState, type EmptyStateProperties, type EmptyStateSize, type EmptyStateStates, type EventState, FooterAction, type FooterActionsProperties, type ModalProps, type ModalStates, MultiSelect, type MultiSelectProps, type NavigationAction, PageHeader, type PageheaderProperties, type ReplyButtonVariants, type ReplyPalette$1 as ReplyPalette, type ReplyTextPalette, type ReplyVariants, type RepplyAnchorPositions, type RepplySizeVariants, SCActivityCalendar, SCAppBar, SCAutocomplete, SCCalendarSwipeable, SCCard, SCDataGrid, SCDataGridInitial, SCDateRange, SCDialog, SCDrawer, SCListContent, SCMenu, SCModal, SCSelect, SCSnackBar, SCTabs, SCTextArea, type SCTextAreaProps, SCTextField, type SCTextFieldProps, SCTime, SCToastNotification, SincoTheme, type ToastBaseProperties, ToastProgress, type ToastType, capitalize, clampEventToVisibleRange, filterEventsForDay, getButtonColor, getCellBorderType, getIcon, getIconComponent, getIconMultiSelect, getModalColor, modalStateConfig, useCalendarNavigation, useFilteredItems, useMultiSelectHandlers, useProgress };

package/dist/index.d.ts

@@ -429,7 +429,7 @@ interface SCDialogProps {
 }
 declare const SCDialog: ({ title, iconTitle, subtitle, content, actions, buttonDialog, disableClose, dividers, widthContent, heightContent, background, typeView, setShow, show }: SCDialogProps) => React__default.JSX.Element;
 
-interface Option$2 {
+interface Option$3 {
     title?: string;
     subtitle?: any;
     description?: any;
@@ -443,13 +443,13 @@ interface Option$2 {
     fn?: any;
 }
 interface SCListContentProps {
-    options: Option$2[];
+    options: Option$3[];
     iconLeftType?: "Icon" | "Avatar";
     iconRightType?: "Icon" | "Avatar";
 }
 declare const SCListContent: ({ options, iconLeftType, iconRightType }: SCListContentProps) => React__default.JSX.Element;
 
-interface Option$1 {
+interface Option$2 {
     name?: string;
     iconLeft?: any | React__default.ReactNode | React__default.ReactElement | React__default.ElementType | null;
     iconRight?: any | React__default.ReactNode | React__default.ReactElement | React__default.ElementType | null;
@@ -458,7 +458,7 @@ interface Option$1 {
 }
 interface SCMenuProps {
     header?: any;
-    options: Option$1[];
+    options: Option$2[];
     defaultOption?: string;
     disable?: boolean;
     widthMenu?: string;
@@ -507,14 +507,14 @@ interface SCSelectProps<T> {
 }
 declare function SCSelect<T>({ label, data, getItemValue, width, size, variant, background, required, disabled, setState, state, }: SCSelectProps<T>): React__default.JSX.Element;
 
-interface Option {
+interface Option$1 {
     name?: string;
     iconOrBadge: string | number | null | undefined | any | React__default.ReactNode | React__default.ReactElement | React__default.ElementType;
     disabled?: boolean;
     page: React__default.ReactNode | React__default.ReactElement;
 }
 interface SCTabsProps {
-    options: Option[];
+    options: Option$1[];
     defaultOption?: string;
     typeIcon?: "badge" | "icon";
     background?: string;
@@ -677,8 +677,25 @@ interface SCSnackBarProps {
 }
 declare const SCSnackBar: ({ type, close, openState, setOpenState, mensaje, duration, position }: SCSnackBarProps) => React__default.JSX.Element;
 
+interface Option {
+    name: string;
+    fn?: () => void;
+    disabled?: boolean;
+}
+interface SCAppBarProps {
+    background?: string;
+    contenidoExtra?: React__default.ReactNode;
+    menuItems?: React__default.ReactNode;
+    options: Option[];
+    fnVolver?: () => void;
+    visibleVolver?: boolean;
+    visibleConexion?: boolean;
+    visibleMenu?: boolean;
+}
+declare const SCAppBar: ({ background, contenidoExtra, options, fnVolver, visibleVolver, visibleConexion, visibleMenu, }: SCAppBarProps) => React__default.JSX.Element;
+
 declare const SincoTheme: _mui_material_styles.Theme;
 declare let AdproSincoTheme: _mui_material_styles.Theme;
 declare let ADCSincoTheme: _mui_material_styles.Theme;
 
-export { ADCSincoTheme, AdproSincoTheme, Attachment, AttachmentMobile, BasicMenu, type BasicMenuProps, CALENDAR_CONSTANTS, Calendar, type CalendarEvent, type CalendarProps, type CalendarView, type CellBorderType, DayEventsList, EmptyState, type EmptyStateProperties, type EmptyStateSize, type EmptyStateStates, type EventState, FooterAction, type FooterActionsProperties, type ModalProps, type ModalStates, MultiSelect, type MultiSelectProps, type NavigationAction, PageHeader, type PageheaderProperties, type ReplyButtonVariants, type ReplyPalette$1 as ReplyPalette, type ReplyTextPalette, type ReplyVariants, type RepplyAnchorPositions, type RepplySizeVariants, SCActivityCalendar, SCAutocomplete, SCCalendarSwipeable, SCCard, SCDataGrid, SCDataGridInitial, SCDateRange, SCDialog, SCDrawer, SCListContent, SCMenu, SCModal, SCSelect, SCSnackBar, SCTabs, SCTextArea, type SCTextAreaProps, SCTextField, type SCTextFieldProps, SCTime, SCToastNotification, SincoTheme, type ToastBaseProperties, ToastProgress, type ToastType, capitalize, clampEventToVisibleRange, filterEventsForDay, getButtonColor, getCellBorderType, getIcon, getIconComponent, getIconMultiSelect, getModalColor, modalStateConfig, useCalendarNavigation, useFilteredItems, useMultiSelectHandlers, useProgress };
+export { ADCSincoTheme, AdproSincoTheme, Attachment, AttachmentMobile, BasicMenu, type BasicMenuProps, CALENDAR_CONSTANTS, Calendar, type CalendarEvent, type CalendarProps, type CalendarView, type CellBorderType, DayEventsList, EmptyState, type EmptyStateProperties, type EmptyStateSize, type EmptyStateStates, type EventState, FooterAction, type FooterActionsProperties, type ModalProps, type ModalStates, MultiSelect, type MultiSelectProps, type NavigationAction, PageHeader, type PageheaderProperties, type ReplyButtonVariants, type ReplyPalette$1 as ReplyPalette, type ReplyTextPalette, type ReplyVariants, type RepplyAnchorPositions, type RepplySizeVariants, SCActivityCalendar, SCAppBar, SCAutocomplete, SCCalendarSwipeable, SCCard, SCDataGrid, SCDataGridInitial, SCDateRange, SCDialog, SCDrawer, SCListContent, SCMenu, SCModal, SCSelect, SCSnackBar, SCTabs, SCTextArea, type SCTextAreaProps, SCTextField, type SCTextFieldProps, SCTime, SCToastNotification, SincoTheme, type ToastBaseProperties, ToastProgress, type ToastType, capitalize, clampEventToVisibleRange, filterEventsForDay, getButtonColor, getCellBorderType, getIcon, getIconComponent, getIconMultiSelect, getModalColor, modalStateConfig, useCalendarNavigation, useFilteredItems, useMultiSelectHandlers, useProgress };

package/dist/index.js

@@ -5309,11 +5309,88 @@ var SCSnackBar = ({
   ));
 };
 
+// src/Components/SCAppBar.tsx
+import React46, { useState as useState26, useEffect as useEffect22 } from "react";
+import { Menu as Menu3, Box as Box29, Typography as Typography27, MenuItem as MenuItem8, IconButton as IconButton17, Badge as Badge3 } from "@mui/material";
+import Grid12 from "@mui/material/Grid";
+import "dayjs/locale/es";
+import MenuIcon from "@mui/icons-material/Menu";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import { Wifi, WifiOff } from "@mui/icons-material";
+var SCAppBar = ({
+  background = "linear-gradient(180deg, #BBE9FC, #FFFFFF)",
+  contenidoExtra,
+  options,
+  fnVolver,
+  visibleVolver = true,
+  visibleConexion = true,
+  visibleMenu = true
+}) => {
+  const [isOnline, setIsOnline] = useState26(window.navigator.onLine);
+  const [anchorEl, setAnchorEl] = useState26(null);
+  const openMenu = Boolean(anchorEl);
+  const handleMenuClick = (event2) => {
+    setAnchorEl(event2.currentTarget);
+  };
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+  };
+  useEffect22(() => {
+    const handleOnline = () => {
+      console.log("tiene internet");
+      setIsOnline(true);
+    };
+    const handleOffline = () => {
+      console.log(" no tiene internet");
+      setIsOnline(false);
+    };
+    window.addEventListener("online", handleOnline);
+    window.addEventListener("offline", handleOffline);
+    return () => {
+      window.removeEventListener("online", handleOnline);
+      window.removeEventListener("offline", handleOffline);
+    };
+  }, []);
+  return /* @__PURE__ */ React46.createElement(React46.Fragment, null, /* @__PURE__ */ React46.createElement(Grid12, { sx: { display: "flex", flexDirection: "column", background } }, /* @__PURE__ */ React46.createElement(Grid12, { size: 12, sx: { display: "flex", flexDirection: "row", alignItems: "center", padding: "0px 16px", justifyContent: "space-between" } }, visibleVolver && /* @__PURE__ */ React46.createElement(IconButton17, { size: "medium", onClick: fnVolver }, /* @__PURE__ */ React46.createElement(ArrowBackIcon, { color: "action" })), /* @__PURE__ */ React46.createElement(Grid12, { sx: { display: "flex", flexDirection: "row", alignItems: "center" } }, visibleConexion && /* @__PURE__ */ React46.createElement(Grid12, { sx: { display: "flex", flexDirection: "row", alignItems: "center" } }, isOnline ? /* @__PURE__ */ React46.createElement(Wifi, { color: "action", sx: { marginRight: "8px" } }) : /* @__PURE__ */ React46.createElement(WifiOff, { color: "action", sx: { marginRight: "8px" } }), /* @__PURE__ */ React46.createElement(
+    Badge3,
+    {
+      anchorOrigin: {
+        vertical: "top",
+        horizontal: "left"
+      },
+      variant: "dot",
+      sx: {
+        position: "relative",
+        top: "-3px",
+        left: "-4px"
+      },
+      color: isOnline ? "success" : "error"
+    }
+  ), /* @__PURE__ */ React46.createElement(Typography27, { variant: "caption", color: "text.secondary" }, isOnline ? "Online" : "Offline")), visibleMenu && /* @__PURE__ */ React46.createElement(React46.Fragment, null, /* @__PURE__ */ React46.createElement(IconButton17, { size: "medium", onClick: handleMenuClick }, /* @__PURE__ */ React46.createElement(MenuIcon, { color: "action" })), /* @__PURE__ */ React46.createElement(
+    Menu3,
+    {
+      anchorEl,
+      open: openMenu,
+      onClose: handleMenuClose,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      sx: { zIndex: "2000" }
+    },
+    options.map((option, index) => /* @__PURE__ */ React46.createElement(MenuItem8, { onClick: option.fn, disabled: option.disabled, key: index }, /* @__PURE__ */ React46.createElement(Typography27, { variant: "body2" }, option.name)))
+  )))), /* @__PURE__ */ React46.createElement(Box29, { sx: { padding: "0px 16px" } }, contenidoExtra)));
+};
+
 // src/Theme/index.ts
 import { createTheme } from "@mui/material/styles";
 
 // src/Theme/components.ts
-import React46 from "react";
+import React47 from "react";
 import {
   InfoRounded as InfoRounded2,
   CheckCircleRounded as CheckCircleRounded2,
@@ -6016,10 +6093,10 @@ var components = {
   MuiAlert: {
     defaultProps: {
       iconMapping: {
-        success: React46.createElement(CheckCircleRounded2),
-        error: React46.createElement(ErrorRounded2),
-        warning: React46.createElement(WarningRounded2),
-        info: React46.createElement(InfoRounded2)
+        success: React47.createElement(CheckCircleRounded2),
+        error: React47.createElement(ErrorRounded2),
+        warning: React47.createElement(WarningRounded2),
+        info: React47.createElement(InfoRounded2)
       }
     },
     variants: [
@@ -7071,6 +7148,7 @@ export {
   MultiSelect,
   PageHeader,
   SCActivityCalendar,
+  SCAppBar,
   SCAutocomplete,
   SCCalendarSwipeable,
   SCCard,