@m4l/components 9.1.8 → 9.1.10

package/components/WindowBase/slots/WindowBaseSlots.d.ts

@@ -0,0 +1,95 @@
+/**
+ * Styled Components for WindowBase
+ *
+ * These styled components provide the foundational structure and styling
+ * for the `WindowBase` component, including its header, content, and icons.
+ */
+/**
+ * Root component for the WindowBase container.
+ */
+export declare const WindowBaseStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').WindowBaseOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('..').WindowBaseOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+/**
+ * Header component for the WindowBase container.
+ */
+export declare const HeaderWindowStyled: import('@emotion/styled').StyledComponent<Pick<import('../subcomponents/Header').HeaderProps & Pick<import('..').WindowBaseProps, "size"> & {
+    windowBaseColor?: import('..').WindowBaseProps["color"];
+    windowBaseSelected?: import('..').WindowBaseProps["selected"];
+    windowBaseVariant?: import('..').WindowBaseProps["variant"];
+    windowBaseSize?: import('..').WindowBaseProps["size"];
+}, "onClose" | "title" | "size" | "selected" | "color" | "variant" | "version" | "subTitle" | "iconUrl" | "windowBaseColor" | "windowBaseSelected" | "windowBaseVariant" | "windowBaseSize"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').WindowBaseOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('..').WindowBaseOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+/**
+ * Content component for the WindowBase container.
+ */
+export declare const ContentWindowStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').WindowBaseOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('..').WindowBaseOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+/**
+ * Header container for the component.
+ */
+export declare const HeaderWindowComponentStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').WindowBaseOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('..').WindowBaseOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+/**
+ * Content wrapper for the header.
+ */
+export declare const HeaderContentStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').WindowBaseOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('..').WindowBaseOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+/**
+ * Icon component for the header.
+ */
+export declare const IconWindowStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Icon').IconProps, keyof import('../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').WindowBaseOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('..').WindowBaseOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+/**
+ * Title component for the header.
+ */
+export declare const TitleWindowStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Typography/types').TypographyProps, keyof import('../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').WindowBaseOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('..').WindowBaseOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+/**
+ * Subtitle component for the header.
+ */
+export declare const SubtitleWindowStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Typography/types').TypographyProps, keyof import('../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').WindowBaseOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('..').WindowBaseOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+/**
+ * Subtitle container for the header.
+ */
+export declare const SubtitleContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').WindowBaseOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('..').WindowBaseOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+/**
+ * Point component for the header.
+ */
+export declare const PointStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').WindowBaseOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('..').WindowBaseOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+/**
+ * Point icon component for the header.
+ */
+export declare const PointIconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Icon').IconProps, keyof import('../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').WindowBaseOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('..').WindowBaseOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+/**
+ * Wrapper for icons in the header.
+ */
+export declare const IconsWrapperStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').WindowBaseOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('..').WindowBaseOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+/**
+ * Styled component for menu actions in the header.
+ */
+export declare const MenuActionsWindowsStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/MenuActions/types').MenuActionsProps, keyof import('../../mui_extended/MenuActions/types').MenuActionsProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').WindowBaseOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('..').WindowBaseOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+/**
+ * Styled component for the close button in the header.
+ */
+export declare const CloseWindowStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/IconButton/types').IconButtonProps, keyof import('../../mui_extended/IconButton/types').IconButtonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').WindowBaseOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('..').WindowBaseOwnerState> & Record<string, unknown>;
+}, {}, {}>;

package/components/WindowBase/slots/WindowBaseSlots.js

@@ -0,0 +1,81 @@
+import { styled } from "@mui/material/styles";
+import { W as WINDOW_BASE_KEY_COMPONENT } from "../constants.js";
+import { W as WindowBaseSlots } from "./WindowBaseEnum.js";
+import { w as windowBaseStyles } from "../WindowBase.styles.js";
+import { H as HeaderWindowBase } from "../subcomponents/Header/HeaderWindowBase.js";
+import { T as Typography } from "../../mui_extended/Typography/Typography.js";
+import { M as MenuActions } from "../../mui_extended/MenuActions/MenuActions.js";
+import { I as IconButton } from "../../mui_extended/IconButton/IconButton.js";
+import { I as Icon } from "../../Icon/Icon.js";
+const WindowBaseStyled = styled("div", {
+  name: WINDOW_BASE_KEY_COMPONENT,
+  slot: WindowBaseSlots.wrapperWindowBase
+})(windowBaseStyles?.wrapperWindowBase);
+const HeaderWindowStyled = styled(HeaderWindowBase, {
+  name: WINDOW_BASE_KEY_COMPONENT,
+  slot: WindowBaseSlots.headerWindowBase
+})(windowBaseStyles?.headerWindowBase);
+const ContentWindowStyled = styled("div", {
+  name: WINDOW_BASE_KEY_COMPONENT,
+  slot: WindowBaseSlots.contentWindowBase
+})(windowBaseStyles?.contentWindowBase);
+const HeaderWindowComponentStyled = styled("div", {
+  name: WINDOW_BASE_KEY_COMPONENT,
+  slot: WindowBaseSlots.headerWindowComponent
+})(windowBaseStyles?.headerWindowComponent);
+const HeaderContentStyled = styled("div", {
+  name: WINDOW_BASE_KEY_COMPONENT,
+  slot: WindowBaseSlots.headerContentWindowBase
+})(windowBaseStyles?.headerContentWindowBase);
+const IconWindowStyled = styled(Icon, {
+  name: WINDOW_BASE_KEY_COMPONENT,
+  slot: WindowBaseSlots.headerIconWindowBase
+})(windowBaseStyles?.headerIconWindowBase);
+const TitleWindowStyled = styled(Typography, {
+  name: WINDOW_BASE_KEY_COMPONENT,
+  slot: WindowBaseSlots.headerTitleWindowBase
+})(windowBaseStyles?.headerTitleWindowBase);
+const SubtitleWindowStyled = styled(Typography, {
+  name: WINDOW_BASE_KEY_COMPONENT,
+  slot: WindowBaseSlots.headerSubTitleWindowBase
+})(windowBaseStyles?.headerSubTitleWindowBase);
+const SubtitleContainerStyled = styled("div", {
+  name: WINDOW_BASE_KEY_COMPONENT,
+  slot: WindowBaseSlots.subtitleContainer
+})(windowBaseStyles?.subtitleContainer);
+const PointStyled = styled("div", {
+  name: WINDOW_BASE_KEY_COMPONENT,
+  slot: WindowBaseSlots.pointWindowBase
+})(windowBaseStyles?.pointWindowBase);
+const PointIconStyled = styled(Icon, {
+  name: WINDOW_BASE_KEY_COMPONENT,
+  slot: WindowBaseSlots.pointIcon
+})(windowBaseStyles?.pointIcon);
+const IconsWrapperStyled = styled("div", {
+  name: WINDOW_BASE_KEY_COMPONENT,
+  slot: WindowBaseSlots.iconsWrapperWindowBase
+})(windowBaseStyles?.iconsWrapperWindowBase);
+const MenuActionsWindowsStyled = styled(MenuActions, {
+  name: WINDOW_BASE_KEY_COMPONENT,
+  slot: WindowBaseSlots.menuActionsWindowBase
+})(windowBaseStyles?.menuActionsWindowBase);
+const CloseWindowStyled = styled(IconButton, {
+  name: WINDOW_BASE_KEY_COMPONENT,
+  slot: WindowBaseSlots.closeWindowBase
+})(windowBaseStyles?.closeWindowBase);
+export {
+  ContentWindowStyled as C,
+  HeaderWindowStyled as H,
+  IconWindowStyled as I,
+  MenuActionsWindowsStyled as M,
+  PointStyled as P,
+  SubtitleContainerStyled as S,
+  TitleWindowStyled as T,
+  WindowBaseStyled as W,
+  HeaderWindowComponentStyled as a,
+  HeaderContentStyled as b,
+  PointIconStyled as c,
+  SubtitleWindowStyled as d,
+  IconsWrapperStyled as e,
+  CloseWindowStyled as f
+};

package/components/WindowBase/slots/index.d.ts

@@ -0,0 +1,2 @@
+export * from './WindowBaseEnum';
+export * from './WindowBaseSlots';

package/components/WindowBase/slots/index.js

@@ -0,0 +1 @@
+

package/components/WindowBase/subcomponents/Header/HeaderWindowBase.d.ts

@@ -0,0 +1,46 @@
+import { HeaderProps } from './types';
+import { WindowBaseOwnerState } from '../../types';
+/**
+ * `HeaderWindowBase` Component
+ *
+ * This component renders the header section of a window, including the title, subtitle,
+ * an icon, menu actions, and a close button.
+ * It is customizable based on properties such as size, color, and whether the window is in a "selected" state.
+ *
+ * ### Purpose:
+ * - Display the header for a `WindowBase` component.
+ * - Provides flexibility to add a title, subtitle, icon, version label, and menu actions.
+ * - Visually supports a selected state (`selected`) for a distinct appearance when the window is active.
+ *
+ * ### Props:
+ * - `title` (string): The title to be displayed in the header.
+ * - `subTitle` (string, optional): The subtitle displayed below the title.
+ * - `onClose` (VoidFunction, optional): Callback executed when the close button is clicked.
+ * - `urlIcon` (string, optional): The URL for the icon to be shown in the header.
+ * - `menuActions` (MenuAction[], optional): List of actions for the header's dropdown menu.
+ * - `size` ('small' | 'medium' | 'large', optional): Defines the header size, default is `medium`.
+ * - `componentPaletteColor` (optional): Custom color for the component, overrides theme settings.
+ * - `color` ('default', optional): Base color of the header, default is `default`.
+ * - `selected` (boolean, optional): Indicates if the window is selected. Modifies visual appearance when active.
+ * - `version` (string, optional): Version label to be displayed in the header.
+ *
+ * ### Example Usage:
+ * ```tsx
+ * <HeaderWindowBase
+ *   title="My Window"
+ *   subTitle="Additional Details"
+ *   onClose={() => console.log('Closing window')}
+ *   iconUrl="https://example.com/icon.png"
+ *   menuActions={[
+ *     { label: 'Action 1', onClick: () => console.log('Action 1 selected') },
+ *     { label: 'Action 2', onClick: () => console.log('Action 2 selected') },
+ *   ]}
+ *   selected={true}
+ * />
+ * ```
+ * @author cesar - automatic
+ * @createdAt 2024-11-20 09:38:37 - automatic
+ * @updatedAt 2024-11-25 15:36:27 - automatic
+ * @updatedUser cesar - automatic
+ */
+export declare const HeaderWindowBase: (props: HeaderProps & WindowBaseOwnerState) => import("react/jsx-runtime").JSX.Element;

package/components/WindowBase/subcomponents/Header/HeaderWindowBase.js

@@ -0,0 +1,78 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useEnvironment } from "@m4l/core";
+import { useMemo } from "react";
+import { I as ICONS } from "../../icons.js";
+import { d as dragResizeWindowClasses } from "../../../DragResizeWindow/classes/index.js";
+import { a as HeaderWindowComponentStyled, b as HeaderContentStyled, I as IconWindowStyled, T as TitleWindowStyled, S as SubtitleContainerStyled, P as PointStyled, c as PointIconStyled, d as SubtitleWindowStyled, e as IconsWrapperStyled, M as MenuActionsWindowsStyled, f as CloseWindowStyled } from "../../slots/WindowBaseSlots.js";
+const HeaderWindowBase = (props) => {
+  const {
+    title,
+    subTitle,
+    onClose,
+    iconUrl,
+    size,
+    color,
+    selected,
+    version,
+    variant
+  } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const menuActions = useMemo(() => {
+    return [
+      {
+        startIcon: `${host_static_assets}/${environment_assets}/frontend/components/menu_actions/assets/icons/${ICONS.VERSION}`,
+        label: version || "",
+        disabled: true
+      }
+    ];
+  }, [host_static_assets, version, environment_assets]);
+  const ownerState = {
+    windowBaseColor: color,
+    windowBaseSelected: selected,
+    windowBaseVariant: variant,
+    windowBaseSize: size
+  };
+  return /* @__PURE__ */ jsxs(HeaderWindowComponentStyled, { className: dragResizeWindowClasses.draggableHandle, ownerState, children: [
+    /* @__PURE__ */ jsxs(HeaderContentStyled, { ownerState, children: [
+      iconUrl && /* @__PURE__ */ jsx(IconWindowStyled, { size, ownerState, src: iconUrl }),
+      /* @__PURE__ */ jsx(TitleWindowStyled, { size, ownerState, children: title }),
+      subTitle && /* @__PURE__ */ jsxs(SubtitleContainerStyled, { size, ownerState, children: [
+        /* @__PURE__ */ jsx(PointStyled, { size, ownerState, children: /* @__PURE__ */ jsx(
+          PointIconStyled,
+          {
+            src: `${host_static_assets}/${environment_assets}/frontend/components/window_base/assets/icons/${ICONS.POINT}`,
+            size,
+            ownerState
+          }
+        ) }),
+        /* @__PURE__ */ jsx(SubtitleWindowStyled, { size, ownerState, children: subTitle })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(IconsWrapperStyled, { ownerState, children: [
+      version && /* @__PURE__ */ jsx(
+        MenuActionsWindowsStyled,
+        {
+          ownerState,
+          urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/window_base/assets/icons/${ICONS.MORE_VERTICAL}`,
+          arrowType: "no-arrow",
+          marginTop: "12px",
+          anchorOrigin: { vertical: "bottom", horizontal: "right" },
+          transformOrigin: { vertical: "top", horizontal: "right" },
+          menuActions
+        }
+      ),
+      onClose && /* @__PURE__ */ jsx(
+        CloseWindowStyled,
+        {
+          ownerState,
+          src: `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/${ICONS.CLOSE}`,
+          onClick: () => onClose && onClose(),
+          "aria-label": "click"
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  HeaderWindowBase as H
+};

package/components/WindowBase/subcomponents/Header/index.d.ts

@@ -0,0 +1,2 @@
+export * from './HeaderWindowBase';
+export * from './types';

package/components/WindowBase/subcomponents/Header/index.js

@@ -0,0 +1 @@
+

package/components/WindowBase/subcomponents/Header/types.d.ts

@@ -0,0 +1,90 @@
+import { MenuAction } from 'src/components/mui_extended';
+import { WindowBaseProps } from '../../types';
+/**
+ * Properties used by the `Header` component.
+ *
+ * This interface defines the expected properties for the window header,
+ * including the title, subtitle, cancel actions, icons, style classes, and color configuration.
+ *
+ * ### Properties:
+ * - `title` (string): The main title of the header.
+ * - `subTitle` (string, optional): An optional subtitle for the header.
+ * - `onClose` (VoidFunction, optional): Callback function executed when the close button is clicked.
+ * - `iconUrl` (string, optional): URL of the icon displayed in the header.
+ * - `color` ('default', optional): Component palette color, restricted to `'default'`.
+ * - `version` (string, optional): Version information to be displayed in the header.
+ * - `selected` (boolean, optional): Indicates whether the header is in a "selected" state.
+ * - `variant` ('outlined' | 'text', optional): Visual variant of the header.
+ *
+ * ### Example:
+ * ```typescript
+ * const headerProps: HeaderProps = {
+ * title: 'My Window',
+ * subTitle: 'Window Subtitle',
+ * onClickCancel: () => console.log('Close window'),
+ * iconUrl: 'https://example.com/icon.png',
+ * classes: { root: 'header-root' },
+ * color: 'default',
+ * };
+ * ```
+ *
+ * ### Notes:
+ * - `color` uses the palette colors defined in the theme, with support for restricted values.
+ * - `selected` modifies the visual appearance to indicate the selected state.
+ * @see WindowBaseProps - General properties for the window base.
+ */
+export type HeaderProps = Pick<WindowBaseProps, 'title' | 'subTitle' | 'iconUrl' | 'onClose' | 'color' | 'version' | 'selected' | 'variant'>;
+/**
+ * Defines the visibility types for window actions.
+ */
+export type WindowActionType = 'main' | 'allways' | 'normal';
+/**
+ * Defines the structure of a window action, extending the `MenuAction` type.
+ * This includes additional properties for visibility, a unique key, an optional tag, and a custom class name.
+ *
+ * ### Properties:
+ * - `visibility` (WindowActionType): Defines the visibility of the action (`'main'`, `'allways'`, `'normal'`).
+ * - `key` (string): A unique key that identifies the action.
+ * - `tag` (optional, any): An optional tag or label for the action.
+ * - `className` (optional, string): An optional custom CSS class for the action.
+ *
+ * ### Example:
+ * ```typescript
+ * const windowAction: windowWindowAction = {
+ *   visibility: 'main',
+ *   key: 'action1',
+ *   tag: 'Action Tag',
+ *   className: 'action-class',
+ *   onClick: () => console.log('Action clicked'),
+ * };
+ * ```
+ */
+export interface windowWindowAction extends MenuAction {
+    /**
+     * Defines the visibility type of the window action.
+     * This determines when and how the action is displayed, based on its visibility setting.
+     *
+     * Possible values:
+     * - `'main'`: The action is displayed as a main action.
+     * - `'allways'`: The action is always visible.
+     * - `'normal'`: The action is visible under normal circumstances.
+     */
+    visibility: WindowActionType;
+    /**
+     * A unique key for identifying the window action.
+     * This key is used to distinguish this action from others and may be referenced programmatically.
+     */
+    key: string;
+    /**
+     * An optional tag or label for the window action.
+     * This can be used to store additional metadata or a label associated with the action.
+     * The tag is not required for the action to function but can be useful for descriptive purposes.
+     */
+    tag?: any;
+    /**
+     * An optional custom CSS class for the window action.
+     * This can be used to apply custom styles to the action element.
+     * If not provided, the action will use the default styling.
+     */
+    className?: string;
+}

package/components/WindowBase/subcomponents/Header/types.js

@@ -0,0 +1 @@
+

package/components/WindowBase/types.d.ts

@@ -0,0 +1,136 @@
+import { ReactNode } from 'react';
+import { WindowBaseSlots } from './slots/WindowBaseEnum';
+import { OverridesStyleRules } from '@mui/material/styles/overrides';
+import { WINDOW_BASE_KEY_COMPONENT } from './constants';
+import { Theme } from '@mui/material/styles';
+import { ComponentPalletColor, Sizes } from '@m4l/styles';
+/**
+ * Interface representing the main properties of the `WindowBase` component.
+ *
+ * Defines the structure and functionality of the component, including its title, subtitle, content,
+ * icon URL, menu actions, visual configurations, and other related attributes.
+ * title (required) - The main title of the window.
+ * subTitle (optional) - Subtitle for the window.
+ * children (required) - Content to be rendered inside the window.
+ * urlIcon (optional) - URL for the icon displayed in the header.
+ * variant (optional) - Visual style of the window, with values `'outlined'` or `'text'`.
+ * size (optional) - Size of the window: `'small'` or `'medium'`.
+ * color (optional) - Theme color of the window, restricted to `'default'`.
+ * selected (optional) - Indicates if the window is selected.
+ * version (optional) - Component version (e.g., `1.0.0`).
+ * dataTestId (optional) - Identifier for automated testing.
+ * onClose (optional) - Function executed when the window is closed.
+ *
+ * ### Example:
+ * ```typescript
+ * const windowProps: WindowBaseProps = {
+ *   title: 'Main Window',
+ *   subTitle: 'Details',
+ *   children: <div>Window Content</div>,
+ *   urlIcon: 'https://example.com/icon.png',
+ *   variant: 'outlined',
+ *   menuActions: [{ label: 'Action 1', onClick: () => console.log('Action 1') }],
+ *   size: 'medium',
+ *   color: 'default',
+ *   selected: true,
+ *   version: '1.0.0',
+ *   dataTestId: 'main-window',
+ *   onClose: () => console.log('Cancel Clicked'),
+ * };
+ * ```
+ * @author cesar - automatic
+ * @createdAt 2024-11-20 09:38:37 - automatic
+ * @updatedAt 2024-11-22 09:10:41 - automatic
+ * @updatedUser cesar - automatic
+ */
+export interface WindowBaseProps {
+    /**
+     * The main title of the window.
+     * This property is required and displayed prominently at the top of the window.
+     */
+    title: string;
+    /**
+     * An optional subtitle for the window.
+     * Typically displayed below the main title to provide additional context or details.
+     */
+    subTitle?: string;
+    /**
+     * The content to be rendered inside the window.
+     * This can include any valid React node or JSX.
+     */
+    children: ReactNode;
+    /**
+     * URL of the icon displayed in the header of the window.
+     * This is optional and used to provide a visual identifier for the window.
+     */
+    iconUrl?: string;
+    /**
+     * The visual style of the window.
+     * - `'outlined'`: Displays the window with an outlined border.
+     * - `'text'`: Displays the window with minimal styling, emphasizing the content.
+     * Default is `'outlined'` if not specified.
+     */
+    variant?: 'outlined' | 'text';
+    /**
+     * Size of the window.
+     * - `'small'`: A compact window size.
+     * - `'medium'`: A standard window size.
+     * Default is `'medium'` if not specified.
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * The color theme of the window.
+     * Restricted to `'default'`, which applies the default theme color.
+     */
+    color?: Extract<ComponentPalletColor, 'default'>;
+    /**
+     * Indicates if the window is currently selected.
+     * When `true`, the window may display a visual indicator to denote selection.
+     */
+    selected?: boolean;
+    /**
+     * The version label for the window.
+     * Useful for displaying version information (e.g., `1.0.0`) in the header or footer.
+     */
+    version?: string;
+    /**
+     * A unique identifier for automated testing.
+     * Provides a `data-testid` attribute for querying this component in tests.
+     */
+    dataTestId?: string;
+    /**
+     * Callback function executed when the window is closed.
+     * Typically triggered by a close button or similar action.
+     */
+    onClose?: VoidFunction;
+}
+/**
+ * Type representing the possible values of `WindowBaseSlots`.
+ *
+ * This is used to map slot identifiers for the `WindowBase` component.
+ */
+export type WindowBaseType = keyof typeof WindowBaseSlots;
+/**
+ * Owner state (`ownerState`) for the `WindowBase` component.
+ *
+ * Defines properties that influence the styles and behavior of the component.
+ * windowBaseColor (optional) - Color applied to the component.
+ * windowBaseSelected (optional) - Indicates if the component is selected.
+ * windowBaseVariant (optional) - Visual variant of the component (`'outlined'` or `'text'`).
+ * windowBaseSize (optional) - Size of the component (`'small'` or `'medium'`).
+ */
+export type WindowBaseOwnerState = Pick<WindowBaseProps, 'size'> & {
+    windowBaseColor?: WindowBaseProps['color'];
+    windowBaseSelected?: WindowBaseProps['selected'];
+    windowBaseVariant?: WindowBaseProps['variant'];
+    windowBaseSize?: WindowBaseProps['size'];
+};
+/**
+ * Type for defining custom styles for the `WindowBase` component.
+ *
+ * Allows overriding default styles for each slot of the `WindowBase` component using MUI's `OverridesStyleRules`.
+ * WindowBaseType - Represents the style overrides for the component slots.
+ * WINDOW_BASE_KEY_COMPONENT - Key used to register the `WindowBase` component with the theme.
+ * Theme - The theme object containing styling information.
+ */
+export type WindowBaseStyles = Partial<OverridesStyleRules<WindowBaseType, typeof WINDOW_BASE_KEY_COMPONENT, Theme> | undefined> | undefined;

package/components/WindowBase/types.js

@@ -0,0 +1 @@
+

package/components/WindowConfirm/WindowConfirm.d.ts

@@ -0,0 +1,28 @@
+import { WindowConfirmProps } from './types';
+/**
+ * WindowConfirm Component
+ *
+ * A modal component for displaying confirmation dialogs with customizable messages,
+ * titles, and action buttons. The component allows users to define behaviors for the
+ * "Confirm" and "Cancel" actions and supports multiple visual variants (e.g., warning,
+ * success, error).
+ * @param {WindowConfirmProps} props - Properties for configuring the component.
+ * [variant="warning"] - The visual variant for the modal (e.g., "warning", "error", "success", "info", "delete").
+ * [title] - The title displayed in the modal. Defaults to a label from the module dictionary.
+ * [msg] - The message displayed in the modal. Defaults to a label from the module dictionary.
+ * [onClickCancel] - Callback executed when the "Cancel" button is clicked.
+ * [onClickIntro] - Callback executed when the "Confirm" button is clicked.
+ * @example
+ * <WindowConfirm
+ *   variant="warning"
+ *   title="Confirm Deletion"
+ *   msg="Are you sure you want to delete this item?"
+ *   onClickCancel={() => console.log("Cancelled")}
+ *   onClickIntro={() => console.log("Confirmed")}
+ * />
+ * @author SebastianM - automatic
+ * @createdAt 2024-11-06 09:00:05 - automatic
+ * @updatedAt 2024-11-28 09:07:58 - automatic
+ * @updatedUser cesar - automatic
+ */
+export declare const WindowConfirm: (props: WindowConfirmProps) => import("react/jsx-runtime").JSX.Element;