@m4l/gclick 0.0.2 → 0.1.0

package/@types/types.d.ts

@@ -2,21 +2,24 @@ import { ComponentsOverrides, ComponentsVariants } from '@mui/material/styles';
 import { MapPopupDeviceGpsOwnerState, MapPopupDeviceGpsSlotsType } from '../components/maps/components/GpsMap/popups/MapPopupDevice/types';
 import { CourseFormatterOwnerState, CourseFormatterSlotsType } from '../formatters/CourseFormatter/types';
 import { IndicatorCSQOwnerState, IndicatorCSQSlotsType } from '../components/indicators/IndicatorCSQ/types';
-import { GaugeSlotsType } from '../components/gauges/Gauge/types';
+import { IndicatorBatteryOwnerState, IndicatorBatterySlotsType } from '../components/indicators/IndicatorBattery/types';
+import { IndicatorValueStatusSlotsType } from '../components/indicators/IndicatorValueStatus/types';
 declare module '@mui/material/styles' {
   // Define the slots in the theme
   interface ComponentNameToClassKey {
     M4LMapPopupDevice:  MapPopupDeviceGpsSlotsType;
     M4LCourseFormatter: CourseFormatterSlotsType;
     M4LCSQSignal: IndicatorCSQSlotsType;
-    M4LGauge: GaugeSlotsType;
+    M4LIndicatorBattery: IndicatorBatterySlotsType;
+    M4LIndicatorValueStatus: IndicatorValueStatusSlotsType;
   }
   interface ComponentsPropsList {
     // Extend ComponentsProps or ComponentsOwnerState(this extend ComponentProps)
     M4LMapPopupDevice:  Partial<MapPopupDeviceGpsOwnerState>;
     M4LCourseFormatter:  Partial<CourseFormatterOwnerState>;
     M4LCSQSignal:  Partial<IndicatorCSQOwnerState>;
-    M4LGauge:  Partial<GaugeOwnerState>;
+    M4LIndicatorBattery:  Partial<IndicatorBatteryOwnerState>;
+    M4LIndicatorValueStatus:  Partial<IndicatorValueStatusOwnerState>;
   }
   interface Components {
     M4LMapPopupDevice?: {
@@ -34,10 +37,15 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LCSQSignal'];
       variants?: ComponentsVariants['M4LCSQSignal'];
     };
-    M4LGauge?: {
-      defaultProps?: ComponentsPropsList['M4LGauge'];
-      styleOverrides?: ComponentsOverrides<Theme>['M4LGauge'];
-      variants?: ComponentsVariants['M4LGauge'];
+    M4LIndicatorBattery?: {
+      defaultProps?: ComponentsPropsList['M4LIndicatorBattery'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LIndicatorBattery'];
+      variants?: ComponentsVariants['M4LIndicatorBattery'];
+    };
+    M4LIndicatorValueStatus?: {
+      defaultProps?: ComponentsPropsList['M4LIndicatorValueStatus'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LIndicatorValueStatus'];
+      variants?: ComponentsVariants['M4LIndicatorValueStatus'];
     };
    }
 }

package/components/GaugeCircular/GaugeCircular.d.ts

@@ -0,0 +1,8 @@
+import { GaugeCircularProps } from './types';
+/**
+ * Renderiza un gauge circular que representa un valor porcentual.
+ * @description GaugeFullCircle component
+ * @param props - GaugeFullCircleProps
+ * @returns GaugeFullCircleRootStyled
+ */
+export declare const GaugeCircular: (props: GaugeCircularProps) => import("react/jsx-runtime").JSX.Element;

package/components/GaugeCircular/GaugeCircular.js

@@ -0,0 +1,30 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useModuleSkeleton } from "@m4l/core";
+import { G as GAUGE_CIRCULAR_CLASSES } from "./constants.js";
+import { G as GaugeFullCircleRootStyled, a as GaugeFullCircleCircularBgStyled, b as GaugeFullCircleInnerStyled } from "./slots/GaugeCircularSlots.js";
+import clsx from "clsx";
+import { C as CircularProgress } from "./subcomponents/CircularProgress/CircularProgress.js";
+const GaugeCircular = (props) => {
+  const { value, children, className } = props;
+  const isSkeleton = useModuleSkeleton();
+  const normalizedValue = isSkeleton ? 0 : Math.max(0, Math.min(100, value));
+  return /* @__PURE__ */ jsxs(
+    GaugeFullCircleRootStyled,
+    {
+      role: "progressbar",
+      "aria-label": "GaugeCircular",
+      "aria-valuenow": normalizedValue,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      className: clsx(GAUGE_CIRCULAR_CLASSES.root, className),
+      children: [
+        /* @__PURE__ */ jsx(GaugeFullCircleCircularBgStyled, {}),
+        /* @__PURE__ */ jsx(CircularProgress, { value: normalizedValue }),
+        /* @__PURE__ */ jsx(GaugeFullCircleInnerStyled, { children })
+      ]
+    }
+  );
+};
+export {
+  GaugeCircular as G
+};

package/components/GaugeCircular/GaugeCircular.styles.d.ts

@@ -0,0 +1,2 @@
+import { GaugeCircularStyles } from './types';
+export declare const gaugeCircularStyles: GaugeCircularStyles;

package/components/GaugeCircular/GaugeCircular.styles.js

@@ -0,0 +1,52 @@
+const gaugeCircularStyles = {
+  /**
+   * Estilos para el contenedor principal del gauge
+   */
+  root: ({ theme }) => ({
+    position: "relative",
+    width: "76px",
+    height: "76px",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: "50%",
+    boxShadow: `inset 0 4px 4px 0 ${theme.vars.palette.background.surface}`,
+    "& > svg": {
+      zIndex: 1,
+      "& .circular-progress-circle": {
+        stroke: `${theme.vars.palette.primary.enabled}!important`,
+        transition: "stroke-dashoffset 0.3s ease-in-out"
+      }
+    }
+  }),
+  /**
+   * Estilos para el fondo del gauge
+   */
+  circularBg: ({ theme }) => ({
+    opacity: 0.5,
+    width: "inherit",
+    height: "inherit",
+    borderRadius: "inherit",
+    position: "absolute",
+    background: theme.vars.palette.background.surface
+  }),
+  /**
+   * Estilos para el contenedor interno del gauge
+   */
+  inner: ({ theme }) => ({
+    width: "60px",
+    height: "60px",
+    borderRadius: "50%",
+    background: theme.vars.palette.background.default,
+    position: "absolute",
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings.sp1,
+    justifyContent: "center",
+    alignItems: "center",
+    boxShadow: `0 4px 4px 0 ${theme.vars.palette.background.surface}`
+  })
+};
+export {
+  gaugeCircularStyles as g
+};

package/components/GaugeCircular/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const GAUGE_CIRCULAR_KEY_COMPONENT = "M4LGaugeCircular";
+export declare const GAUGE_CIRCULAR_CLASSES: Record<string, string>;

package/components/GaugeCircular/constants.js

@@ -0,0 +1,8 @@
+import { getComponentClasses } from "@m4l/components";
+import { G as GaugeCircularSlots } from "./slots/GaugeCircularEnum.js";
+const GAUGE_CIRCULAR_KEY_COMPONENT = "M4LGaugeCircular";
+const GAUGE_CIRCULAR_CLASSES = getComponentClasses(GAUGE_CIRCULAR_KEY_COMPONENT, GaugeCircularSlots);
+export {
+  GAUGE_CIRCULAR_CLASSES as G,
+  GAUGE_CIRCULAR_KEY_COMPONENT as a
+};

package/components/GaugeCircular/index.d.ts

@@ -0,0 +1 @@
+export { GaugeCircular } from './GaugeCircular';

package/components/GaugeCircular/slots/GaugeCircularEnum.d.ts

@@ -0,0 +1,5 @@
+export declare enum GaugeCircularSlots {
+    root = "root",
+    inner = "inner",
+    circularBg = "circularBg"
+}

package/components/GaugeCircular/slots/GaugeCircularEnum.js

@@ -0,0 +1,9 @@
+var GaugeCircularSlots = /* @__PURE__ */ ((GaugeCircularSlots2) => {
+  GaugeCircularSlots2["root"] = "root";
+  GaugeCircularSlots2["inner"] = "inner";
+  GaugeCircularSlots2["circularBg"] = "circularBg";
+  return GaugeCircularSlots2;
+})(GaugeCircularSlots || {});
+export {
+  GaugeCircularSlots as G
+};

package/components/GaugeCircular/slots/GaugeCircularSlots.d.ts

@@ -0,0 +1,3 @@
+export declare const GaugeFullCircleRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const GaugeFullCircleInnerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const GaugeFullCircleCircularBgStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/GaugeCircular/slots/GaugeCircularSlots.js

@@ -0,0 +1,21 @@
+import { styled } from "@mui/material/styles";
+import { a as GAUGE_CIRCULAR_KEY_COMPONENT } from "../constants.js";
+import { G as GaugeCircularSlots } from "./GaugeCircularEnum.js";
+import { g as gaugeCircularStyles } from "../GaugeCircular.styles.js";
+const GaugeFullCircleRootStyled = styled("div", {
+  name: GAUGE_CIRCULAR_KEY_COMPONENT,
+  slot: GaugeCircularSlots.root
+})(gaugeCircularStyles?.root);
+const GaugeFullCircleInnerStyled = styled("div", {
+  name: GAUGE_CIRCULAR_KEY_COMPONENT,
+  slot: GaugeCircularSlots.inner
+})(gaugeCircularStyles?.inner);
+const GaugeFullCircleCircularBgStyled = styled("div", {
+  name: GAUGE_CIRCULAR_KEY_COMPONENT,
+  slot: GaugeCircularSlots.circularBg
+})(gaugeCircularStyles?.circularBg);
+export {
+  GaugeFullCircleRootStyled as G,
+  GaugeFullCircleCircularBgStyled as a,
+  GaugeFullCircleInnerStyled as b
+};

package/components/GaugeCircular/subcomponents/CircularProgress/CircularProgress.d.ts

@@ -0,0 +1,8 @@
+/**
+ * CircularProgress component
+ * @param props - CircularProgressProps
+ * @returns SVG con el círculo de progreso
+ */
+export declare const CircularProgress: ({ value }: {
+    value?: number | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/components/GaugeCircular/subcomponents/CircularProgress/CircularProgress.js

@@ -0,0 +1,44 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { C as CIRCULAR_PROGRESS_SIZE, a as CIRCULAR_PROGRESS_STROKE_WIDTH } from "./constants.js";
+const CircularProgress = ({ value = 30 }) => {
+  const { radius, circumference, offset } = useMemo(() => {
+    const radius2 = (CIRCULAR_PROGRESS_SIZE - CIRCULAR_PROGRESS_STROKE_WIDTH) / 2;
+    const circumference2 = 2 * Math.PI * radius2;
+    const offset2 = circumference2 - value / 100 * circumference2;
+    return { radius: radius2, circumference: circumference2, offset: offset2 };
+  }, [value]);
+  return /* @__PURE__ */ jsxs("svg", { width: CIRCULAR_PROGRESS_SIZE, height: CIRCULAR_PROGRESS_SIZE, style: { position: "absolute" }, children: [
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: CIRCULAR_PROGRESS_SIZE / 2,
+        cy: CIRCULAR_PROGRESS_SIZE / 2,
+        r: radius,
+        strokeWidth: CIRCULAR_PROGRESS_STROKE_WIDTH,
+        strokeLinecap: "butt",
+        fill: "none"
+      },
+      "background-circle"
+    ),
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        className: "circular-progress-circle",
+        cx: CIRCULAR_PROGRESS_SIZE / 2,
+        cy: CIRCULAR_PROGRESS_SIZE / 2,
+        r: radius,
+        strokeWidth: CIRCULAR_PROGRESS_STROKE_WIDTH,
+        fill: "none",
+        strokeDasharray: circumference,
+        strokeDashoffset: offset,
+        strokeLinecap: "round",
+        transform: `rotate(-90 ${CIRCULAR_PROGRESS_SIZE / 2} ${CIRCULAR_PROGRESS_SIZE / 2})`
+      },
+      "progress-circle"
+    )
+  ] });
+};
+export {
+  CircularProgress as C
+};

package/components/GaugeCircular/subcomponents/CircularProgress/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const CIRCULAR_PROGRESS_SIZE = 72;
+export declare const CIRCULAR_PROGRESS_STROKE_WIDTH = 4;

package/components/GaugeCircular/subcomponents/CircularProgress/constants.js

@@ -0,0 +1,6 @@
+const CIRCULAR_PROGRESS_SIZE = 72;
+const CIRCULAR_PROGRESS_STROKE_WIDTH = 4;
+export {
+  CIRCULAR_PROGRESS_SIZE as C,
+  CIRCULAR_PROGRESS_STROKE_WIDTH as a
+};

package/components/GaugeCircular/subcomponents/CircularProgress/index.d.ts

@@ -0,0 +1 @@
+export { CircularProgress } from './CircularProgress';

package/components/GaugeCircular/test/GaugeCircular.test.d.ts

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

package/components/GaugeCircular/types.d.ts

@@ -0,0 +1,25 @@
+import { M4LOverridesStyleRules } from '@m4l/components';
+import { GaugeCircularSlots } from './slots/GaugeCircularEnum';
+import { GAUGE_CIRCULAR_KEY_COMPONENT } from './constants';
+import { Theme } from '@mui/material';
+export interface GaugeCircularProps {
+    /**
+     * Porcentaje de la barra, debe ser un número entre 0 y 100
+     */
+    value: number;
+    /**
+     * Clase para el contenedor del gauge
+     */
+    className?: string;
+    /**
+     * Data test id para el gauge
+     */
+    dataTestId?: string;
+    /**
+     * Componente hijo para el gauge
+     */
+    children?: React.ReactNode;
+}
+export type GaugeCircularOwnerState = {};
+export type GaugeCircularSlotsType = keyof typeof GaugeCircularSlots;
+export type GaugeCircularStyles = M4LOverridesStyleRules<GaugeCircularSlotsType, typeof GAUGE_CIRCULAR_KEY_COMPONENT, Theme>;

package/components/index.d.ts

@@ -1,4 +1,4 @@
 export * from './DeviceLabel';
 export * from './DeviceStatus';
 export * from './maps';
-export * from './gauges';
+export * from './indicators';

package/components/indicators/IndicatorBattery/IndicatorBattery.d.ts

@@ -0,0 +1,7 @@
+import { IndicatorBatteryProps } from './types';
+/**
+ * Renderiza un indicador de batería con un gauge circular.
+ * @description IndicatorBattery component
+ * @param props - IndicatorBatteryProps
+ */
+export declare const IndicatorBattery: (props: IndicatorBatteryProps) => import("react/jsx-runtime").JSX.Element;

package/components/indicators/IndicatorBattery/IndicatorBattery.js

@@ -0,0 +1,102 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { I as IndicatorBatteryRootStyled, T as TitleStyled, C as ContentStyled, S as StatusVoltageContainerStyled, a as StatusContainerStyled, V as VoltageContainerStyled, b as ContainerTitleBatteryPorcentageStyled, c as ContainerIconPercentageStyled, d as ContainerStatusVoltageStyled } from "./slots/IndicatorBaterySlots.js";
+import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import { I as INDICATOR_BATTERY_DICTIONARY } from "./dictionary.js";
+import { Icon, Typography, Chip } from "@m4l/components";
+import { u as useBatteryStatus } from "./hooks/useBatteryStatus/useBatteryStatus.js";
+import { I as INDICATOR_BATTERY_CLASSES, a as INDICATOR_BATTERY_KEY_COMPONENT } from "./constants.js";
+import clsx from "clsx";
+import { I as IndicatorBatterySlots } from "./slots/IndicatorBatteryEnum.js";
+import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { I as INDICATOR_BATTERY_ICONS } from "./icons.js";
+import { useMemo } from "react";
+import { G as GaugeCircular } from "../../GaugeCircular/GaugeCircular.js";
+const IndicatorBattery = (props) => {
+  const { getLabel } = useModuleDictionary();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  if (!props.value && props.value !== 0) {
+    console.warn("IndicatorBattery: value prop is required");
+  }
+  const batteryStatusParams = useMemo(() => {
+    return "type" in props ? { value: props.value, type: props.type } : {
+      value: props.value,
+      maxVoltage: props.maxVoltage,
+      minVoltage: props.minVoltage,
+      valueWeak: props.valueWeak,
+      valueAcceptable: props.valueAcceptable,
+      valueGood: props.valueGood,
+      valueExcellent: props.valueExcellent
+    };
+  }, [props]);
+  const { label, color, maxVoltage: hookMaxVoltage } = useBatteryStatus(batteryStatusParams);
+  const ownerState = { color };
+  const { value, className, variant = "standard", batteryType = "main", dataTestId } = props;
+  const gaugeValue = useMemo(() => {
+    if (!value || value < 0) {
+      return 0;
+    }
+    if (hookMaxVoltage && hookMaxVoltage > 0) {
+      const percentage = value * 100 / hookMaxVoltage;
+      return Math.ceil(percentage);
+    }
+    return Math.ceil(value);
+  }, [value, hookMaxVoltage]);
+  return /* @__PURE__ */ jsx(
+    IndicatorBatteryRootStyled,
+    {
+      className: clsx(INDICATOR_BATTERY_CLASSES.root, className),
+      variant: "text",
+      role: "progressbar",
+      "aria-label": "indicator-battery",
+      "aria-valuenow": gaugeValue,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      direction: "column",
+      padding: "standard",
+      ...getPropDataTestId(INDICATOR_BATTERY_KEY_COMPONENT, IndicatorBatterySlots.root, dataTestId),
+      children: variant === "standard" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(TitleStyled, { variant: "captionDens", skeletonWidth: "80px", children: getLabel(batteryType === "main" ? INDICATOR_BATTERY_DICTIONARY.titleMain : INDICATOR_BATTERY_DICTIONARY.titleBackup) }),
+        /* @__PURE__ */ jsxs(ContentStyled, { ownerState, children: [
+          /* @__PURE__ */ jsxs(GaugeCircular, { value: gaugeValue, children: [
+            /* @__PURE__ */ jsx(Icon, { src: `${host_static_assets}/${environment_assets}/${INDICATOR_BATTERY_ICONS.batteryStandard}` }),
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-end", justifyContent: "center", gap: "2px" }, children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "subtitle", fontFamily: "Jura", color: "text.primary", skeletonWidth: "20px", children: `${gaugeValue ?? 0}` }),
+              /* @__PURE__ */ jsx(Typography, { variant: "body", fontFamily: "Jura", color: "text.primary", skeletonWidth: "10px", children: "%" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(StatusVoltageContainerStyled, { children: [
+            /* @__PURE__ */ jsxs(StatusContainerStyled, { direction: "row", children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "body", color: "text.secondary", skeletonWidth: "70px", children: getLabel(INDICATOR_BATTERY_DICTIONARY.status) }),
+              /* @__PURE__ */ jsx(Chip, { label, color, variant: "contained", skeletonWidth: "70px" })
+            ] }),
+            /* @__PURE__ */ jsxs(VoltageContainerStyled, { direction: "row", children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "body", color: "text.secondary", skeletonWidth: "70px", children: getLabel(INDICATOR_BATTERY_DICTIONARY.voltage) }),
+              /* @__PURE__ */ jsx(Typography, { variant: "bodyDens", fontFamily: "Inter", color: "text.primary", skeletonWidth: "20px", children: value })
+            ] })
+          ] })
+        ] })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(ContainerTitleBatteryPorcentageStyled, { ownerState, children: [
+          /* @__PURE__ */ jsx(TitleStyled, { variant: "captionDens", skeletonWidth: "80px", children: getLabel(batteryType === "main" ? INDICATOR_BATTERY_DICTIONARY.titleMain : INDICATOR_BATTERY_DICTIONARY.titleBackup) }),
+          /* @__PURE__ */ jsxs(ContainerIconPercentageStyled, { children: [
+            /* @__PURE__ */ jsx(Icon, { src: `${host_static_assets}/${environment_assets}/${INDICATOR_BATTERY_ICONS.batteryCompact}` }),
+            /* @__PURE__ */ jsx(Typography, { variant: "subtitleDens", fontFamily: "Jura", color: "text.primary", skeletonWidth: "20px", children: `${gaugeValue ?? 0}%` })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(ContainerStatusVoltageStyled, { children: [
+          /* @__PURE__ */ jsxs(StatusContainerStyled, { className: INDICATOR_BATTERY_CLASSES.statusContainer, children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "body", color: "text.secondary", skeletonWidth: "70px", children: getLabel(INDICATOR_BATTERY_DICTIONARY.status) }),
+            /* @__PURE__ */ jsx(Chip, { label, color, variant: "contained", skeletonWidth: "70px" })
+          ] }),
+          /* @__PURE__ */ jsxs(VoltageContainerStyled, { className: INDICATOR_BATTERY_CLASSES.voltageContainer, children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "body", color: "text.secondary", skeletonWidth: "70px", children: getLabel(INDICATOR_BATTERY_DICTIONARY.voltage) }),
+            /* @__PURE__ */ jsx(Typography, { variant: "bodyDens", fontFamily: "Inter", color: "text.primary", skeletonWidth: "20px", children: value })
+          ] })
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  IndicatorBattery as I
+};

package/components/indicators/IndicatorBattery/IndicatorBattery.styles.d.ts

@@ -0,0 +1,2 @@
+import { IndicatorBatteryStyles } from './types';
+export declare const indicatorBatteryStyles: IndicatorBatteryStyles;

package/components/indicators/IndicatorBattery/IndicatorBattery.styles.js

@@ -0,0 +1,110 @@
+import { I as INDICATOR_BATTERY_CLASSES } from "./constants.js";
+const indicatorBatteryStyles = {
+  /**
+   * Contenedor del indicador de batería
+   */
+  root: ({ theme }) => ({
+    width: "fit-content",
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings.sp2,
+    backgroundColor: theme.vars.palette.background.base
+  }),
+  /**
+   * Título del indicador de batería
+   */
+  title: () => ({
+    textTransform: "uppercase",
+    justifyContent: "center",
+    display: "flex"
+  }),
+  /**
+   * Contenedor del gauge y los datos de la batería
+   */
+  content: ({ theme, ownerState }) => ({
+    display: "flex",
+    gap: theme.vars.size.baseSpacings.sp5,
+    "& .M4LIcon-icon": {
+      backgroundColor: theme.vars.palette.chips[ownerState?.color ?? "default"].outlined.colorTone
+    },
+    "&&& .circular-progress-circle": {
+      stroke: `${theme.vars.palette.chips[ownerState?.color ?? "default"].outlined.colorTone}!important`
+    }
+  }),
+  /**
+   * Contenedor del estado de la batería y el voltaje
+   */
+  voltageStatusContainer: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    justifyContent: "center",
+    gap: theme.vars.size.baseSpacings.sp4
+  }),
+  /**
+   * Contenedor del estado de la batería
+   */
+  statusContainer: ({ theme }) => ({
+    width: "100%",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp4
+  }),
+  /**
+   * Contenedor del voltaje
+   */
+  voltageContainer: ({ theme }) => ({
+    width: "100%",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp4
+  }),
+  /**
+   * Contenedor del título de la batería y el porcentaje
+   */
+  containerTitleBatteryPorcentage: ({ theme, ownerState }) => ({
+    width: "100%",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp4,
+    "& .M4LIcon-icon": {
+      backgroundColor: theme.vars.palette.chips[ownerState?.color ?? "default"].outlined.colorTone
+    }
+  }),
+  /**
+   * Contenedor del estado de la batería y el voltaje
+   */
+  containerStatusVoltage: ({ theme }) => ({
+    width: "100%",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp5,
+    [`& .${INDICATOR_BATTERY_CLASSES.statusContainer}`]: {
+      flexDirection: "column",
+      alignItems: "flex-start",
+      gap: theme.vars.size.baseSpacings["sp0-5"]
+    },
+    [`& .${INDICATOR_BATTERY_CLASSES.voltageContainer}`]: {
+      flexDirection: "column",
+      alignItems: "flex-end",
+      gap: theme.vars.size.baseSpacings["sp0-5"]
+    }
+  }),
+  /**
+   * Contenedor del icono de la batería
+   */
+  containerIconPercentage: ({ theme }) => ({
+    width: "fit-content",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp1
+  })
+};
+export {
+  indicatorBatteryStyles as i
+};

package/components/indicators/IndicatorBattery/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const INDICATOR_BATTERY_KEY_COMPONENT = "M4LIndicatorBattery";
+export declare const INDICATOR_BATTERY_CLASSES: Record<string, string>;

package/components/indicators/IndicatorBattery/constants.js

@@ -0,0 +1,8 @@
+import { getComponentClasses } from "@m4l/components";
+import { I as IndicatorBatterySlots } from "./slots/IndicatorBatteryEnum.js";
+const INDICATOR_BATTERY_KEY_COMPONENT = "M4LIndicatorBattery";
+const INDICATOR_BATTERY_CLASSES = getComponentClasses(INDICATOR_BATTERY_KEY_COMPONENT, IndicatorBatterySlots);
+export {
+  INDICATOR_BATTERY_CLASSES as I,
+  INDICATOR_BATTERY_KEY_COMPONENT as a
+};

package/components/indicators/IndicatorBattery/dictionary.d.ts

@@ -0,0 +1,14 @@
+export declare const INDICATOR_BATTERY_DICTIONARY_KEY = "indicator_battery";
+export declare const getIndicatorBatteryComponentsDictionary: () => string[];
+export declare const INDICATOR_BATTERY_DICTIONARY: {
+    titleMain: string;
+    titleBackup: string;
+    status: string;
+    voltage: string;
+    statusWeak: string;
+    statusAcceptable: string;
+    statusGood: string;
+    statusExcellent: string;
+    statusNotDetectable: string;
+    statusOverVoltage: string;
+};

package/components/indicators/IndicatorBattery/dictionary.js

@@ -0,0 +1,16 @@
+const INDICATOR_BATTERY_DICTIONARY_KEY = "indicator_battery";
+const INDICATOR_BATTERY_DICTIONARY = {
+  titleMain: `${INDICATOR_BATTERY_DICTIONARY_KEY}.title_main`,
+  titleBackup: `${INDICATOR_BATTERY_DICTIONARY_KEY}.title_backup`,
+  status: `${INDICATOR_BATTERY_DICTIONARY_KEY}.label_status`,
+  voltage: `${INDICATOR_BATTERY_DICTIONARY_KEY}.label_voltage`,
+  statusWeak: `${INDICATOR_BATTERY_DICTIONARY_KEY}.label_status_weak`,
+  statusAcceptable: `${INDICATOR_BATTERY_DICTIONARY_KEY}.label_status_acceptable`,
+  statusGood: `${INDICATOR_BATTERY_DICTIONARY_KEY}.label_status_good`,
+  statusExcellent: `${INDICATOR_BATTERY_DICTIONARY_KEY}.label_status_excellent`,
+  statusNotDetectable: `${INDICATOR_BATTERY_DICTIONARY_KEY}.label_status_not_detectable`,
+  statusOverVoltage: `${INDICATOR_BATTERY_DICTIONARY_KEY}.label_status_over_voltage`
+};
+export {
+  INDICATOR_BATTERY_DICTIONARY as I
+};

package/components/indicators/IndicatorBattery/hooks/useBatteryStatus/constants.d.ts

@@ -0,0 +1,9 @@
+import { BatteryThreshold } from './types';
+/**
+ * Umbrales de la batería optimizados para evitar duplicación de maxVoltage
+ * Estructura flexible que permite agregar nuevos tipos de batería sin cambiar código
+ */
+export declare const BATTERY_THRESHOLDS: Record<string, {
+    maxVoltage: number;
+    thresholds: Omit<BatteryThreshold, 'maxVoltage'>[];
+}>;

package/components/indicators/IndicatorBattery/hooks/useBatteryStatus/constants.js

@@ -0,0 +1,35 @@
+const BATTERY_THRESHOLDS = {
+  "24": {
+    maxVoltage: 27.9,
+    thresholds: [
+      { min: 25.2, max: 27.9, label: "statusExcellent", color: "persianGreen" },
+      { min: 24.8, max: 25.1, label: "statusGood", color: "info" },
+      { min: 24.4, max: 24.7, label: "statusAcceptable", color: "warning" },
+      { min: 0, max: 24.3, label: "statusWeak", color: "error" }
+      /* { min: 28.0, max: 29.0, label: 'statusOverVoltage', color: 'candy' }, */
+    ]
+  },
+  "12": {
+    maxVoltage: 13.9,
+    thresholds: [
+      { min: 12.6, max: 13.9, label: "statusExcellent", color: "persianGreen" },
+      { min: 12.4, max: 12.5, label: "statusGood", color: "info" },
+      { min: 12.2, max: 12.3, label: "statusAcceptable", color: "warning" },
+      { min: 0, max: 12.1, label: "statusWeak", color: "error" }
+      /* { min: 14.0, max: 14.5, label: 'statusOverVoltage', color: 'candy' }, */
+    ]
+  },
+  "4.5": {
+    maxVoltage: 5.1,
+    thresholds: [
+      { min: 4.2, max: 5.1, label: "statusExcellent", color: "persianGreen" },
+      { min: 4.1, max: 4.1, label: "statusGood", color: "info" },
+      { min: 3.9, max: 4, label: "statusAcceptable", color: "warning" },
+      { min: 0, max: 3.8, label: "statusWeak", color: "error" }
+      /* { min: 5.2, max: 5.5, label: 'statusOverVoltage', color: 'candy' }, */
+    ]
+  }
+};
+export {
+  BATTERY_THRESHOLDS as B
+};

package/components/indicators/IndicatorBattery/hooks/useBatteryStatus/test/useBattery.test.d.ts

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