@m4l/components 9.3.4 → 9.3.5

package/components/SettingsLayout/slots/SettingsLayoutSlots.js

@@ -0,0 +1,83 @@
+import { styled } from "@mui/material/styles";
+import { S as SettingsLayoutSlots } from "./SettingsLayoutEnum.js";
+import { a as SETTINGS_LAYOUT_COMPONENT_KEY } from "../constants.js";
+import { s as settingsLayoutStyles } from "../SettingsLayout.styles.js";
+import { Backdrop } from "@mui/material";
+import { I as Icon } from "../../Icon/Icon.js";
+import { T as Typography } from "../../mui_extended/Typography/Typography.js";
+import { B as Button } from "../../mui_extended/Button/Button.js";
+const SettingsLayoutRootStyled = styled("div", {
+  name: SETTINGS_LAYOUT_COMPONENT_KEY,
+  slot: SettingsLayoutSlots.root
+})(settingsLayoutStyles.root);
+const BackdropStyled = styled(Backdrop, {
+  name: SETTINGS_LAYOUT_COMPONENT_KEY,
+  slot: SettingsLayoutSlots.backdrop
+})(settingsLayoutStyles.backdrop);
+styled(Icon, {
+  name: SETTINGS_LAYOUT_COMPONENT_KEY,
+  slot: SettingsLayoutSlots.icon
+})(settingsLayoutStyles.icon);
+const TypographyStyled = styled(Typography, {
+  name: SETTINGS_LAYOUT_COMPONENT_KEY,
+  slot: SettingsLayoutSlots.typography
+})(settingsLayoutStyles.typography);
+const HeaderContainerStyled = styled("div", {
+  name: SETTINGS_LAYOUT_COMPONENT_KEY,
+  slot: SettingsLayoutSlots.headerContainer
+})(settingsLayoutStyles.headerContainer);
+const HeaderActionsStyled = styled("div", {
+  name: SETTINGS_LAYOUT_COMPONENT_KEY,
+  slot: SettingsLayoutSlots.headerActions
+})(settingsLayoutStyles.headerActions);
+styled("div", {
+  name: SETTINGS_LAYOUT_COMPONENT_KEY,
+  slot: SettingsLayoutSlots.divider
+})(settingsLayoutStyles.divider);
+const BodyContentStyled = styled("div", {
+  name: SETTINGS_LAYOUT_COMPONENT_KEY,
+  slot: SettingsLayoutSlots.bodyContent
+})(settingsLayoutStyles.bodyContent);
+const SettingContainerStyled = styled("div", {
+  name: SETTINGS_LAYOUT_COMPONENT_KEY,
+  slot: SettingsLayoutSlots.settingContainer
+})(settingsLayoutStyles.settingContainer);
+const SettingIconTitleStyled = styled("div", {
+  name: SETTINGS_LAYOUT_COMPONENT_KEY,
+  slot: SettingsLayoutSlots.settingIconTitle
+})(settingsLayoutStyles.settingIconTitle);
+const SettingItemStyled = styled("div", {
+  name: SETTINGS_LAYOUT_COMPONENT_KEY,
+  slot: SettingsLayoutSlots.settingItem
+})(settingsLayoutStyles.settingItem);
+const SettingItemContentStyled = styled("div", {
+  name: SETTINGS_LAYOUT_COMPONENT_KEY,
+  slot: SettingsLayoutSlots.settingItemContent
+})(settingsLayoutStyles.settingItemContent);
+const SettingItemColorStyled = styled(Icon, {
+  name: SETTINGS_LAYOUT_COMPONENT_KEY,
+  slot: SettingsLayoutSlots.settingItemColor
+})(settingsLayoutStyles.settingItemColor);
+const SettingItemColorContainerStyled = styled("div", {
+  name: SETTINGS_LAYOUT_COMPONENT_KEY,
+  slot: SettingsLayoutSlots.settingItemColorContainer
+})(settingsLayoutStyles.settingItemColorContainer);
+const SettingFullscreenStyled = styled(Button, {
+  name: SETTINGS_LAYOUT_COMPONENT_KEY,
+  slot: SettingsLayoutSlots.settingFullscreen
+})(settingsLayoutStyles.settingFullscreen);
+export {
+  BackdropStyled as B,
+  HeaderContainerStyled as H,
+  SettingContainerStyled as S,
+  TypographyStyled as T,
+  SettingIconTitleStyled as a,
+  SettingItemContentStyled as b,
+  SettingFullscreenStyled as c,
+  SettingItemStyled as d,
+  SettingItemColorContainerStyled as e,
+  SettingItemColorStyled as f,
+  SettingsLayoutRootStyled as g,
+  HeaderActionsStyled as h,
+  BodyContentStyled as i
+};

package/components/SettingsLayout/subcomponents/SettingColorPresets/SettingColorPresets.d.ts

@@ -0,0 +1,5 @@
+import { SettingColorPresetsProps } from './types';
+/**
+ * Color presets
+ */
+export declare const SettingColorPresets: (props: SettingColorPresetsProps) => import("react/jsx-runtime").JSX.Element;

package/components/SettingsLayout/subcomponents/SettingColorPresets/SettingColorPresets.js

@@ -0,0 +1,37 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Typography } from "@mui/material";
+import { useModuleDictionary } from "@m4l/core";
+import { S as SettingContainerStyled, a as SettingIconTitleStyled, b as SettingItemContentStyled } from "../../slots/SettingsLayoutSlots.js";
+import { D as DICTIONARY } from "../../dictionary.js";
+import { P as PATH_ICONS } from "../../icons.js";
+import { useThemeSettingsStore } from "@m4l/graphics";
+import { S as SettingItemColor } from "../SettingItemColor/SettingItemColor.js";
+import { I as Icon } from "../../../Icon/Icon.js";
+const SettingColorPresets = (props) => {
+  const { prefixPathIcon } = props;
+  const { themeUserSettings, settingsActions, presetsOptionsColorMain } = useThemeSettingsStore((state) => state);
+  const { themeColor: themeColorPresets } = themeUserSettings;
+  const { onChangeColor } = settingsActions;
+  const { getLabel } = useModuleDictionary();
+  return /* @__PURE__ */ jsxs(SettingContainerStyled, { children: [
+    /* @__PURE__ */ jsxs(SettingIconTitleStyled, { children: [
+      /* @__PURE__ */ jsx(Icon, { src: `${prefixPathIcon}/${PATH_ICONS.PALETTE}` }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body", children: getLabel(DICTIONARY.PRESETS) })
+    ] }),
+    /* @__PURE__ */ jsx(SettingItemContentStyled, { role: "group", "aria-label": "theme-preset-options", children: presetsOptionsColorMain.map((color, index) => {
+      const isSelected = themeColorPresets === color.name;
+      return /* @__PURE__ */ jsx(
+        SettingItemColor,
+        {
+          color: color.name,
+          selected: isSelected,
+          onChange: () => onChangeColor(color.name)
+        },
+        `${color.name}-${index}`
+      );
+    }) })
+  ] });
+};
+export {
+  SettingColorPresets as S
+};

package/components/SettingsLayout/subcomponents/SettingColorPresets/index.d.ts

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

package/components/SettingsLayout/subcomponents/SettingColorPresets/index.js

@@ -0,0 +1 @@
+

package/components/SettingsLayout/subcomponents/SettingColorPresets/types.d.ts

@@ -0,0 +1,3 @@
+export interface SettingColorPresetsProps {
+    prefixPathIcon: string;
+}

package/components/SettingsLayout/subcomponents/SettingDirection/SettingDirection.d.ts

@@ -0,0 +1,5 @@
+import { SettingDirectionProps } from './types';
+/**
+ * Configuración de la dirección del tema
+ */
+export default function SettingDirection(props: SettingDirectionProps): import("react/jsx-runtime").JSX.Element;

package/components/SettingsLayout/subcomponents/SettingDirection/SettingDirection.js

@@ -0,0 +1,37 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useModuleDictionary } from "@m4l/core";
+import { P as PATH_ICONS } from "../../icons.js";
+import { S as SettingContainerStyled, a as SettingIconTitleStyled, b as SettingItemContentStyled } from "../../slots/SettingsLayoutSlots.js";
+import { D as DICTIONARY } from "../../dictionary.js";
+import { useThemeSettingsStore } from "@m4l/graphics";
+import { T as Typography } from "../../../mui_extended/Typography/Typography.js";
+import { S as SettingItem } from "../SettingItem/SettingItem.js";
+import { I as Icon } from "../../../Icon/Icon.js";
+function SettingDirection(props) {
+  const { prefixPathIcon } = props;
+  const { themeUserSettings, settingsActions } = useThemeSettingsStore((state) => state);
+  const { themeDirection } = themeUserSettings;
+  const { onChangeDirection } = settingsActions;
+  const { getLabel } = useModuleDictionary();
+  return /* @__PURE__ */ jsxs(SettingContainerStyled, { children: [
+    /* @__PURE__ */ jsxs(SettingIconTitleStyled, { children: [
+      /* @__PURE__ */ jsx(Icon, { src: `${prefixPathIcon}/${PATH_ICONS.DIRECTION}` }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body", children: getLabel(DICTIONARY.DIRECTION) })
+    ] }),
+    /* @__PURE__ */ jsx(SettingItemContentStyled, { role: "group", "aria-label": "theme-direction-options", children: ["ltr", "rtl"].map((direction, index) => {
+      const isSelected = themeDirection === direction;
+      return /* @__PURE__ */ jsx(
+        SettingItem,
+        {
+          iconUrl: direction === "ltr" ? `${prefixPathIcon}/${PATH_ICONS.ALIGN_LEFT}` : `${prefixPathIcon}/${PATH_ICONS.ALIGN_RIGHT}`,
+          selected: isSelected,
+          onChange: () => onChangeDirection(direction)
+        },
+        `${direction}-${index}`
+      );
+    }) })
+  ] });
+}
+export {
+  SettingDirection as S
+};

package/components/SettingsLayout/subcomponents/SettingDirection/index.d.ts

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

package/components/SettingsLayout/subcomponents/SettingDirection/types.d.ts

@@ -0,0 +1,3 @@
+export interface SettingDirectionProps {
+    prefixPathIcon: string;
+}

package/components/SettingsLayout/subcomponents/SettingFullscreen/SettingFullscreen.d.ts

@@ -0,0 +1,5 @@
+import { SettingFullscreenProps } from './types';
+/**
+ * Configuración de pantalla completa
+ */
+export declare const SettingFullscreen: (props: SettingFullscreenProps) => import("react/jsx-runtime").JSX.Element;

package/components/SettingsLayout/subcomponents/SettingFullscreen/SettingFullscreen.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { I as Icon } from "../../../Icon/Icon.js";
+import { useModuleDictionary } from "@m4l/core";
+import { D as DICTIONARY } from "../../dictionary.js";
+import { P as PATH_ICONS } from "../../icons.js";
+import { c as SettingFullscreenStyled } from "../../slots/SettingsLayoutSlots.js";
+const SettingFullscreen = (props) => {
+  const { prefixPathIcon } = props;
+  const [fullscreen, setFullscreen] = useState(false);
+  const { getLabel } = useModuleDictionary();
+  const toggleFullScreen = () => {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+      setFullscreen(true);
+    } else if (document.exitFullscreen) {
+      document.exitFullscreen();
+      setFullscreen(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    SettingFullscreenStyled,
+    {
+      fullWidth: true,
+      variant: "contained",
+      color: "default",
+      startIcon: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          src: fullscreen ? `${prefixPathIcon}/${PATH_ICONS.FULLSCREEN_EXIT}` : `${prefixPathIcon}/${PATH_ICONS.FULLSCREEN}`
+        }
+      ),
+      onClick: toggleFullScreen,
+      label: getLabel(fullscreen ? DICTIONARY.EXIT_FULLSCREEN : DICTIONARY.FULLSCREEN)
+    }
+  );
+};
+export {
+  SettingFullscreen as S
+};

package/components/SettingsLayout/subcomponents/SettingFullscreen/index.d.ts

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

package/components/SettingsLayout/subcomponents/SettingFullscreen/index.js

@@ -0,0 +1 @@
+

package/components/SettingsLayout/subcomponents/SettingFullscreen/types.d.ts

@@ -0,0 +1,3 @@
+export interface SettingFullscreenProps {
+    prefixPathIcon: string;
+}

package/components/SettingsLayout/subcomponents/SettingItem/SettingItem.d.ts

@@ -0,0 +1,8 @@
+import { SettingItemProps } from './types';
+/**
+ * Componente para el item de configuración.
+ * Este componente se utiliza para mostrar un item de configuración en el componente SettingsLayout.
+ * @param props - Propiedades del componente.
+ * @returns Componente SettingItem.
+ */
+export declare const SettingItem: (props: SettingItemProps) => import("react/jsx-runtime").JSX.Element;

package/components/SettingsLayout/subcomponents/SettingItem/SettingItem.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { d as SettingItemStyled } from "../../slots/SettingsLayoutSlots.js";
+import { I as Icon } from "../../../Icon/Icon.js";
+const SettingItem = (props) => {
+  const { iconUrl, onChange, selected } = props;
+  return /* @__PURE__ */ jsx(
+    SettingItemStyled,
+    {
+      ...onChange ? {
+        onClick: onChange,
+        tabIndex: 0,
+        role: "radio",
+        "aria-label": "theme-mode-options",
+        "aria-checked": true
+      } : {},
+      ownerState: { selected, onChange: !!onChange },
+      children: /* @__PURE__ */ jsx(Icon, { src: iconUrl, color: selected ? "primary.enabled" : "text.secondary" })
+    }
+  );
+};
+export {
+  SettingItem as S
+};

package/components/SettingsLayout/subcomponents/SettingItem/index.d.ts

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

package/components/SettingsLayout/subcomponents/SettingItem/index.js

@@ -0,0 +1 @@
+

package/components/SettingsLayout/subcomponents/SettingItem/types.d.ts

@@ -0,0 +1,5 @@
+export interface SettingItemProps {
+    iconUrl: string;
+    onChange?: VoidFunction;
+    selected: boolean;
+}

package/components/SettingsLayout/subcomponents/SettingItemColor/SettingItemColor.d.ts

@@ -0,0 +1,8 @@
+import { SettingItemColorProps } from './types';
+/**
+ * Componente para el item de configuración.
+ * Este componente se utiliza para mostrar un item de configuración en el componente SettingsLayout.
+ * @param props - Propiedades del componente.
+ * @returns Componente SettingItem.
+ */
+export declare const SettingItemColor: (props: SettingItemColorProps) => import("react/jsx-runtime").JSX.Element;

package/components/SettingsLayout/subcomponents/SettingItemColor/SettingItemColor.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { e as SettingItemColorContainerStyled, f as SettingItemColorStyled } from "../../slots/SettingsLayoutSlots.js";
+import { P as PATH_ICONS } from "../../icons.js";
+import { useEnvironment } from "@m4l/core";
+const SettingItemColor = (props) => {
+  const { onChange, selected, color } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  return /* @__PURE__ */ jsx(SettingItemColorContainerStyled, { children: /* @__PURE__ */ jsx(
+    SettingItemColorStyled,
+    {
+      src: `${host_static_assets}/${environment_assets}/${PATH_ICONS.COLOR}`,
+      ...onChange ? {
+        onClick: onChange,
+        tabIndex: 0,
+        role: "radio",
+        "aria-checked": true
+      } : {},
+      ownerState: { selected, onChange: !!onChange, color }
+    }
+  ) });
+};
+export {
+  SettingItemColor as S
+};

package/components/SettingsLayout/subcomponents/SettingItemColor/index.d.ts

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

package/components/SettingsLayout/subcomponents/SettingItemColor/index.js

@@ -0,0 +1 @@
+

package/components/SettingsLayout/subcomponents/SettingItemColor/types.d.ts

@@ -0,0 +1,6 @@
+import { ThemeUserColor } from '@m4l/styles';
+export interface SettingItemColorProps {
+    onChange?: VoidFunction;
+    selected: boolean;
+    color: ThemeUserColor;
+}

package/components/SettingsLayout/subcomponents/SettingMode/SettingMode.d.ts

@@ -0,0 +1,5 @@
+import { SettingModeProps } from './types';
+/**
+ * Configuración de modo de tema
+ */
+export declare const SettingMode: (props: SettingModeProps) => import("react/jsx-runtime").JSX.Element;

package/components/SettingsLayout/subcomponents/SettingMode/SettingMode.js

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { I as Icon } from "../../../Icon/Icon.js";
+import { useModuleDictionary } from "@m4l/core";
+import { P as PATH_ICONS } from "../../icons.js";
+import { D as DICTIONARY } from "../../dictionary.js";
+import { S as SettingContainerStyled, a as SettingIconTitleStyled, b as SettingItemContentStyled } from "../../slots/SettingsLayoutSlots.js";
+import { useThemeSettingsStore } from "@m4l/graphics";
+import { T as Typography } from "../../../mui_extended/Typography/Typography.js";
+import { S as SettingItem } from "../SettingItem/SettingItem.js";
+const SettingMode = (props) => {
+  const { prefixPathIcon } = props;
+  const { settingsActions, themeUserSettings } = useThemeSettingsStore((state) => state);
+  const { onChangeMode } = settingsActions;
+  const { getLabel } = useModuleDictionary();
+  return /* @__PURE__ */ jsxs(SettingContainerStyled, { role: "group", "aria-label": "theme-mode-options", children: [
+    /* @__PURE__ */ jsxs(SettingIconTitleStyled, { children: [
+      /* @__PURE__ */ jsx(Icon, { src: `${prefixPathIcon}/${PATH_ICONS.MODE}` }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body", children: getLabel(DICTIONARY.MODE) })
+    ] }),
+    /* @__PURE__ */ jsx(SettingItemContentStyled, { children: ["light", "dark"].map((mode, index) => {
+      const isSelected = themeUserSettings.themeMode === mode;
+      return /* @__PURE__ */ jsx(
+        SettingItem,
+        {
+          iconUrl: mode === "light" ? `${prefixPathIcon}/${PATH_ICONS.SUN}` : `${prefixPathIcon}/${PATH_ICONS.MOON}`,
+          selected: isSelected,
+          onChange: () => onChangeMode(mode)
+        },
+        `${mode}-${index}`
+      );
+    }) })
+  ] });
+};
+export {
+  SettingMode as S
+};

package/components/SettingsLayout/subcomponents/SettingMode/index.d.ts

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

package/components/SettingsLayout/subcomponents/SettingMode/index.js

@@ -0,0 +1 @@
+

package/components/SettingsLayout/subcomponents/SettingMode/types.d.ts

@@ -0,0 +1,3 @@
+export interface SettingModeProps {
+    prefixPathIcon: string;
+}

package/components/SettingsLayout/subcomponents/SettingsLayoutBase/SettingsLayoutBase.d.ts

@@ -0,0 +1,5 @@
+import { SettingsLayoutBaseProps } from './types';
+/**
+ * Theme Settings
+ */
+export declare const SettingsLayoutBase: (props: SettingsLayoutBaseProps) => import("react/jsx-runtime").JSX.Element;

package/components/SettingsLayout/subcomponents/SettingsLayoutBase/SettingsLayoutBase.js

@@ -0,0 +1,76 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { AnimatePresence } from "framer-motion";
+import { useModuleDictionary } from "@m4l/core";
+import { P as PATH_ICONS } from "../../icons.js";
+import { B as BackdropStyled, g as SettingsLayoutRootStyled, H as HeaderContainerStyled, T as TypographyStyled, h as HeaderActionsStyled, i as BodyContentStyled } from "../../slots/SettingsLayoutSlots.js";
+import { S as SettingDirection } from "../SettingDirection/SettingDirection.js";
+import { D as DICTIONARY } from "../../dictionary.js";
+import { useThemeSettingsStore } from "@m4l/graphics";
+import { b as SETTINGS_LAYOUT_CLASSES } from "../../constants.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/IconButton.js";
+import { S as SettingMode } from "../SettingMode/SettingMode.js";
+import { S as SettingColorPresets } from "../SettingColorPresets/SettingColorPresets.js";
+import { S as SettingFullscreen } from "../SettingFullscreen/SettingFullscreen.js";
+const SettingsLayoutBase = (props) => {
+  const {
+    open,
+    themeUserSettings,
+    settingsActions
+  } = useThemeSettingsStore((state) => state);
+  const { prefixPathIcon, width } = props;
+  const { themeDirection } = themeUserSettings;
+  const { onResetSetting, handleOpen } = settingsActions;
+  const { getLabel } = useModuleDictionary();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      BackdropStyled,
+      {
+        ownerState: {},
+        open,
+        onClick: () => handleOpen()
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(SettingsLayoutRootStyled, { role: "form", "aria-label": "settings-layout", ownerState: { themeDirection, width }, className: SETTINGS_LAYOUT_CLASSES.root, children: [
+      /* @__PURE__ */ jsxs(HeaderContainerStyled, { ownerState: {}, className: SETTINGS_LAYOUT_CLASSES.headerContainer, children: [
+        /* @__PURE__ */ jsx(
+          TypographyStyled,
+          {
+            ownerState: {},
+            variant: "subtitleDens",
+            ellipsis: true,
+            children: getLabel(DICTIONARY.MODULE_NAME)
+          }
+        ),
+        /* @__PURE__ */ jsxs(HeaderActionsStyled, { children: [
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              src: `${prefixPathIcon}/${PATH_ICONS.REFRESH}`,
+              onClick: onResetSetting,
+              role: "button",
+              "aria-label": "reset-setting"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              src: `${prefixPathIcon}/${PATH_ICONS.CLOSE}`,
+              onClick: () => handleOpen(),
+              role: "button",
+              "aria-label": "close-settings"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(BodyContentStyled, { ownerState: {}, children: [
+        /* @__PURE__ */ jsx(SettingMode, { prefixPathIcon }),
+        /* @__PURE__ */ jsx(SettingDirection, { prefixPathIcon }),
+        /* @__PURE__ */ jsx(SettingColorPresets, { prefixPathIcon }),
+        /* @__PURE__ */ jsx(SettingFullscreen, { prefixPathIcon })
+      ] })
+    ] }) })
+  ] });
+};
+export {
+  SettingsLayoutBase as S
+};

package/components/SettingsLayout/subcomponents/SettingsLayoutBase/index.d.ts

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

package/components/SettingsLayout/subcomponents/SettingsLayoutBase/index.js

@@ -0,0 +1 @@
+

package/components/SettingsLayout/subcomponents/SettingsLayoutBase/types.d.ts

@@ -0,0 +1,5 @@
+import { SettingsLayoutProps } from '../../types';
+export interface SettingsLayoutBaseProps {
+    prefixPathIcon: string;
+    width: SettingsLayoutProps['width'];
+}

package/components/SettingsLayout/test/SettingsLayout.test.d.ts

@@ -0,0 +1,18 @@
+export declare const mockThemeUserSettings: {
+    themeMode: string;
+    themeColor: string;
+    themeDirection: string;
+    themeLayout: string;
+    themeStretch: boolean;
+};
+export declare const mockSettingsActions: {
+    init: import('vitest').Mock<(...args: any[]) => any>;
+    onChangeMode: import('vitest').Mock<(...args: any[]) => any>;
+    onChangeColor: import('vitest').Mock<(...args: any[]) => any>;
+    onChangeDirection: import('vitest').Mock<(...args: any[]) => any>;
+    onChangeLayout: import('vitest').Mock<(...args: any[]) => any>;
+    onToggleStretch: import('vitest').Mock<(...args: any[]) => any>;
+    onResetSetting: import('vitest').Mock<(...args: any[]) => any>;
+    handleOpen: import('vitest').Mock<(...args: any[]) => any>;
+    setThemeSettings: import('vitest').Mock<(...args: any[]) => any>;
+};

package/components/SettingsLayout/types.d.ts

@@ -0,0 +1,47 @@
+import { M4LOverridesStyleRules } from '../../@types/augmentations';
+import { SettingsLayoutSlots } from './slots/SettingsLayoutEnum';
+import { SETTINGS_LAYOUT_COMPONENT_KEY } from './constants';
+import { Theme } from '@mui/material';
+import { Sizes, ThemeUserColor } from '@m4l/styles';
+import { ThemeSettingsStore } from '@m4l/graphics';
+export interface SettingsLayoutProps {
+    /**
+     * Propiedad que define el ancho del componente.
+     */
+    width?: number;
+    /**
+     * Medida de tamaño para el componente.
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Nombre de clase css.
+     */
+    className?: string;
+    /**
+     * Identificador usado para pruebas del componente.
+     */
+    dataTestId?: string;
+}
+/**
+ * Tipo para las ranuras del componente.
+ * Este tipo se refiere a las claves dentro de `SettingsLayoutSlots`, que determinan los diferentes elementos
+ * estilizados dentro del componente, como el `root`, `backdrop`, etc.
+ */
+export type SettingsLayoutSlotsType = keyof typeof SettingsLayoutSlots;
+/**
+ * Combinación de las propiedades del componente y su estado propietario.
+ * Este tipo se utiliza para describir el estado completo del componente , incluyendo
+ * las propiedades pasadas al componente y el estado calculado.
+ */
+export interface SettingsLayoutOwnerState extends Pick<ThemeSettingsStore['themeUserSettings'], 'themeDirection'> {
+    width: SettingsLayoutProps['width'];
+    size: SettingsLayoutProps['size'];
+    color?: ThemeUserColor;
+    [key: string]: unknown;
+}
+/**
+ * Tipos de estilos para el componente.
+ * Esta interfaz extiende las reglas de estilo personalizadas para las ranuras del componente (`SettingsLayoutSlots`)
+ * y permite su sobrescritura.
+ */
+export type SettingsLayoutstyles = M4LOverridesStyleRules<SettingsLayoutSlots, typeof SETTINGS_LAYOUT_COMPONENT_KEY, Theme>;

package/components/index.d.ts

@@ -45,5 +45,6 @@ export * from './ToastContainer';
 export * from './WindowBase';
 export * from './WindowConfirm';
 export * from './ModalDialog';
+export * from './SettingsLayout';
 export * from './Pager';
 export * from './ScrollBar';

package/index.js

@@ -186,6 +186,7 @@ import { D as D10, a as a13, M as M7 } from "./components/WindowBase/contexts/Dy
 import { W as W3 } from "./components/WindowConfirm/WindowConfirm.js";
 import { a as a14, g as g27 } from "./components/ModalDialog/dictionary.js";
 import { M as M8 } from "./components/ModalDialog/ModalDialog.js";
+import { S as S10 } from "./components/SettingsLayout/SettingsLayout.js";
 import { P as P13 } from "./components/Pager/Pager.js";
 import { F as F2, R as R22, u as u16 } from "./components/hook-form/RHFormContext/index.js";
 import { g as g28 } from "./components/hook-form/RHFormContext/dictionary.js";
@@ -201,7 +202,7 @@ import { u as u22 } from "./hooks/useInterval/index.js";
 import { u as u23 } from "./hooks/useComponentSize/useComponentSize.js";
 import { u as u24 } from "./hooks/useFormReadyForUpdate/index.js";
 import { u as u25 } from "./hooks/useStateRef/index.js";
-import { S as S10 } from "./hooks/useSvgColor/constants.js";
+import { S as S11 } from "./hooks/useSvgColor/constants.js";
 import { u as u26 } from "./hooks/useSvgColor/useSvgColor.js";
 import { u as u27 } from "./hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js";
 import { u as u28 } from "./hooks/useDataGridPersistence/useDataGridPersistence.js";
@@ -348,11 +349,12 @@ export {
   R as Resizable,
   R2 as ResizableBox,
   R3 as Responsive,
-  S10 as SKELETON_SVG_ICON,
+  S11 as SKELETON_SVG_ICON,
   S8 as ScrollBar,
   S as SectionCommercial,
   S4 as Select,
   S7 as SelectStyled,
+  S10 as SettingsLayout,
   S9 as SideBar,
   S5 as Skeleton,
   S2 as SortCompareValues,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.3.4",
+  "version": "9.3.5",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {

package/storybook/components/SettingsLayout/SettingsLayout.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { SettingsLayout } from '../../../src/components/SettingsLayout/SettingsLayout';
+declare const meta: Meta<typeof SettingsLayout>;
+export default meta;
+type Story = StoryObj<typeof SettingsLayout>;
+export declare const Open: Story;

package/storybook/components/SettingsLayout/subcomponents/SettingsLayoutRender/SettingsLayoutsRender.d.ts

@@ -0,0 +1,5 @@
+import { SettingsLayoutProps } from '../../../../../src/components/SettingsLayout/';
+/**
+ * Wrapper para el componente SettingsLayout encargado de aplicar estilos y props por defecto
+ */
+export declare const SettingsLayoutRender: (props: Partial<SettingsLayoutProps>) => import("react/jsx-runtime").JSX.Element;

package/storybook/components/SettingsLayout/subcomponents/SettingsLayoutRender/index.d.ts

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