@m4l/components 9.3.1-B21072025-beta.2 → 9.3.1

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

@@ -1,34 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Typography } from "@mui/material";
-import { useBase, 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 { S as SettingItemColor } from "../SettingItemColor/SettingItemColor.js";
-import { I as Icon } from "../../../Icon/Icon.js";
-const SettingColorPresets = () => {
-  const { onChangeColor, themeUserSettings: settings, presetsOptionsColorMain, prefixPathIcon } = useBase();
-  const { themeColor: themeColorPresets } = settings;
-  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

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

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

@@ -1 +0,0 @@
-

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

@@ -1,4 +0,0 @@
-/**
- * Configuración de la dirección del tema
- */
-export default function SettingDirection(): import("react/jsx-runtime").JSX.Element;

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

@@ -1,34 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useBase, 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 { 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() {
-  const { prefixPathIcon, onChangeDirection, themeUserSettings } = useBase();
-  const { themeDirection } = themeUserSettings;
-  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

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

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

@@ -1,4 +0,0 @@
-/**
- * Configuración de pantalla completa
- */
-export declare const SettingFullscreen: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,40 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useState } from "react";
-import { I as Icon } from "../../../Icon/Icon.js";
-import { useBase, 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 = () => {
-  const [fullscreen, setFullscreen] = useState(false);
-  const { prefixPathIcon } = useBase();
-  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: "outlined",
-      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

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

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

@@ -1 +0,0 @@
-

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

@@ -1,8 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

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

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

@@ -1 +0,0 @@
-

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

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

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

@@ -1,8 +0,0 @@
-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

@@ -1,20 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { e as SettingItemColorStyled } from "../../slots/SettingsLayoutSlots.js";
-const SettingItemColor = (props) => {
-  const { onChange, selected, color } = props;
-  return /* @__PURE__ */ jsx(
-    SettingItemColorStyled,
-    {
-      ...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

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

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

@@ -1 +0,0 @@
-

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

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

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

@@ -1,4 +0,0 @@
-/**
- * Configuración de modo de tema
- */
-export declare const SettingMode: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,34 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { I as Icon } from "../../../Icon/Icon.js";
-import { useBase, 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 { T as Typography } from "../../../mui_extended/Typography/Typography.js";
-import { S as SettingItem } from "../SettingItem/SettingItem.js";
-const SettingMode = () => {
-  const { prefixPathIcon, themeUserSettings, onChangeMode } = useBase();
-  const { themeMode } = themeUserSettings;
-  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 = 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

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

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

@@ -1 +0,0 @@
-

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

@@ -1,4 +0,0 @@
-/**
- * Theme Settings
- */
-export declare const SettingsLayoutBase: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,76 +0,0 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { AnimatePresence } from "framer-motion";
-import { useBase, useModuleDictionary } from "@m4l/core";
-import { P as PATH_ICONS } from "../../icons.js";
-import { B as BackdropStyled, f as SettingsLayoutRootStyled, H as HeaderContainerStyled, T as TypographyStyled, g as HeaderActionsStyled, h as BodyContentStyled } from "../../slots/SettingsLayoutSlots.js";
-import { S as SettingDirection } from "../SettingDirection/SettingDirection.js";
-import { D as DICTIONARY } from "../../dictionary.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 = () => {
-  const {
-    onResetSetting,
-    handleOpen,
-    open,
-    themeUserSettings,
-    width,
-    classes,
-    prefixPathIcon
-  } = useBase();
-  const { themeDirection } = themeUserSettings;
-  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: classes.root, children: [
-      /* @__PURE__ */ jsxs(HeaderContainerStyled, { ownerState: {}, className: 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, {}),
-        /* @__PURE__ */ jsx(SettingDirection, {}),
-        /* @__PURE__ */ jsx(SettingColorPresets, {}),
-        /* @__PURE__ */ jsx(SettingFullscreen, {})
-      ] })
-    ] }) })
-  ] });
-};
-export {
-  SettingsLayoutBase as S
-};

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

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

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

@@ -1 +0,0 @@
-

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

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

package/components/SettingsLayout/types.d.ts

@@ -1,51 +0,0 @@
-import { M4LOverridesStyleRules } from '../../@types/augmentations';
-import { SettingsLayoutSlots } from './slots/SettingsLayoutEnum';
-import { SETTINGS_LAYOUT_CLASSES, SETTINGS_LAYOUT_COMPONENT_KEY } from './constants';
-import { Theme } from '@mui/material';
-import { Sizes, ThemeUserColor } from '@m4l/styles';
-import { ThemeSettingsStateWithActions, ThemeSettingsStore } from '@m4l/graphics';
-export interface SettingsLayoutProps extends Pick<ThemeSettingsStateWithActions['settingsActions'], 'onResetSetting' | 'handleOpen' | 'onChangeMode' | 'onChangeColor' | 'onChangeDirection' | 'onChangeLayout' | 'onToggleStretch'>, Pick<ThemeSettingsStore, 'open' | 'themeUserSettings' | 'presetsOptionsColorMain'> {
-    /**
-     * 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;
-}
-export type SettingsBaseProvider = Omit<SettingsLayoutProps, 'size' | 'className' | 'dataTestId'> & {
-    classes: Record<keyof typeof SETTINGS_LAYOUT_CLASSES, string>;
-    prefixPathIcon: 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<SettingsLayoutProps['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/mui_extended/Select/types.js

@@ -1 +0,0 @@
-

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

@@ -1,6 +0,0 @@
-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 Test: Story;

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

@@ -1,5 +0,0 @@
-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

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