@m4l/components 9.2.39 → 9.2.41

package/components/mui_extended/TabContent/TabContent.d.ts

@@ -1,5 +1,5 @@
 import { TabContentProps } from './types';
 /**
- * TODO: Documentar
+ *  Componente `TabContent`, que es un envoltorio para las pestañas de `Tabs`
  */
 export declare const TabContent: (props: TabContentProps) => import("react/jsx-runtime").JSX.Element;

package/components/mui_extended/TabContent/TabContent.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import { u as useTabContentUtilityClasses } from "./classes/index.js";
-import { T as TabContentRoot } from "./styles.js";
+import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
+import { T as TAB_CONTENT_KEY_COMPONENT } from "./constants.js";
+import { T as TabContentRootStyled } from "./slots/TabContentSlots.js";
 const TabContent = (props) => {
   const { children, className, ...others } = props;
-  const classes = useTabContentUtilityClasses();
-  return /* @__PURE__ */ jsx(TabContentRoot, { className: clsx(classes.root, className), ...others, children });
+  const root = getComponentSlotRoot(TAB_CONTENT_KEY_COMPONENT);
+  return /* @__PURE__ */ jsx(TabContentRootStyled, { ownerState: {}, className: root, ...others, children });
 };
 export {
   TabContent as T

package/components/mui_extended/TabContent/TabContent.styles.d.ts

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

package/components/mui_extended/TabContent/TabContent.styles.js

@@ -0,0 +1,32 @@
+const tabContentStyles = {
+  /**
+   * Elemento root referencia a `TabContent`
+   */
+  root: ({ theme }) => ({
+    padding: theme.vars.size.baseSpacings.sp3,
+    display: "flex",
+    overflow: "hidden",
+    height: "100%",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings.sp2,
+    background: theme.vars.palette.background.default,
+    borderRadius: theme.vars.size.borderRadius.r1,
+    borderTopLeftRadius: theme.vars.size.borderRadius.r0,
+    position: "relative",
+    flex: 1,
+    border: theme.vars.size.borderStroke.container,
+    borderColor: theme.vars.palette?.border.secondary,
+    boxSizing: "border-box",
+    zIndex: "0",
+    top: "-1px",
+    "& .M4LStack-root": {
+      gap: `${theme.vars.size.baseSpacings.sp2} !important`
+    },
+    "&.M4LTabContent-root > div": {
+      gap: theme.vars.size.baseSpacings.sp2
+    }
+  })
+};
+export {
+  tabContentStyles as t
+};

package/components/mui_extended/TabContent/constants.d.ts

@@ -0,0 +1 @@
+export declare const TAB_CONTENT_KEY_COMPONENT = "M4LTabContent";

package/components/mui_extended/TabContent/constants.js

@@ -0,0 +1,4 @@
+const TAB_CONTENT_KEY_COMPONENT = "M4LTabContent";
+export {
+  TAB_CONTENT_KEY_COMPONENT as T
+};

package/components/mui_extended/TabContent/index.d.ts

@@ -1,2 +1 @@
 export { TabContent } from './TabContent';
-export type { TabContentClassesKey } from './classes/types';

package/components/mui_extended/TabContent/slots/TabContentEnum.d.ts

@@ -0,0 +1,3 @@
+export declare enum TabContentSlots {
+    root = "root"
+}

package/components/mui_extended/TabContent/slots/TabContentEnum.js

@@ -0,0 +1,7 @@
+var TabContentSlots = /* @__PURE__ */ ((TabContentSlots2) => {
+  TabContentSlots2["root"] = "root";
+  return TabContentSlots2;
+})(TabContentSlots || {});
+export {
+  TabContentSlots as T
+};

package/components/mui_extended/TabContent/slots/TabContentSlots.d.ts

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

package/components/mui_extended/TabContent/slots/TabContentSlots.js

@@ -0,0 +1,11 @@
+import { styled } from "@mui/material/styles";
+import { T as TAB_CONTENT_KEY_COMPONENT } from "../constants.js";
+import { t as tabContentStyles } from "../TabContent.styles.js";
+import { T as TabContentSlots } from "./TabContentEnum.js";
+const TabContentRootStyled = styled("div", {
+  slot: TabContentSlots.root,
+  name: TAB_CONTENT_KEY_COMPONENT
+})(tabContentStyles.root);
+export {
+  TabContentRootStyled as T
+};

package/components/mui_extended/TabContent/types.d.ts

@@ -1,7 +1,11 @@
+import { Theme } from '@mui/material';
+import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { Key } from 'react';
-export interface TabContentProps extends React.HTMLAttributes<HTMLDivElement> {
+import { TABS_KEY_COMPONENT } from '../Tabs/constants';
+import { TabContentSlots } from './slots/TabContentEnum';
+export interface TabContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
     children: React.ReactNode;
     style?: React.CSSProperties;
     key?: Key | null | undefined;
-    className?: string | undefined;
 }
+export type TabContentStyles = OverridesStyleRules<keyof typeof TabContentSlots, typeof TABS_KEY_COMPONENT, Theme>;

package/components/mui_extended/Tabs/Tabs.styles.js

@@ -4,19 +4,22 @@ const tabsStyles = {
    */
   root: ({ theme }) => ({
     position: "relative",
-    zIndex: "unset",
+    zIndex: 1,
     display: "flex",
     overflow: "auto",
     width: "100%",
     height: "fit-content",
     maxWidth: "fit-content",
     minHeight: "fit-content",
-    background: theme.vars.palette.default.enabledOpacity,
+    background: theme.vars.palette.background.default,
     paddingBottom: theme.vars.size.baseSpacings.sp0,
     gap: theme.vars.size.baseSpacings.sp0,
     borderRadius: theme.vars.size.borderRadius.r1,
     borderBottomLeftRadius: theme.vars.size.borderRadius.r0,
     borderBottomRightRadius: theme.vars.size.borderRadius.r0,
+    "& .MuiTabs-flexContainer": {
+      background: theme.vars.palette.default.enabledOpacity
+    },
     "& .MuiTabs-scroller": {
       overflow: "visible !important"
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.39",
+  "version": "9.2.41",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0  --no-warn-ignored"

package/storybook/components/extended/mui/TabContent/TabContent.stories.d.ts

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { TabContent } from '../../../../../src';
+import { Tab } from '../../../../../src/components/mui_extended/Tab';
+/**
+ * El componente TabContent agrupa contenido de el tab seleccionado.
+ */
+declare const meta: Meta<typeof TabContent>;
+export default meta;
+type Story = StoryObj<typeof Tab>;
+/**
+ * TabContent en estado Base
+ */
+export declare const Base: Story;
+/**
+ * TabContent en estado Skeleton
+ */
+export declare const Skeleton: Story;

package/components/mui_extended/TabContent/classes/constants.d.ts

@@ -1 +0,0 @@
-export declare const componentName = "M4LTabContent";

package/components/mui_extended/TabContent/classes/constants.js

@@ -1,4 +0,0 @@
-const componentName = "M4LTabContent";
-export {
-  componentName as c
-};

package/components/mui_extended/TabContent/classes/index.d.ts

@@ -1,9 +0,0 @@
-import { TabContentClassesType } from './types';
-export declare const tabContentClasses: TabContentClassesType;
-export declare function getTabContentUtilityClass(slot: string): string;
-/**
- * TODO: Documentar
- */
-export declare const useTabContentUtilityClasses: () => {
-    root: string;
-};

package/components/mui_extended/TabContent/classes/index.js

@@ -1,23 +0,0 @@
-import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
-import { c as componentName } from "./constants.js";
-generateUtilityClasses(componentName, [
-  /* elements */
-  "root"
-  /* states or variants of elements */
-]);
-function getTabContentUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const useTabContentUtilityClasses = () => {
-  const slots = {
-    root: ["root"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getTabContentUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-export {
-  useTabContentUtilityClasses as u
-};

package/components/mui_extended/TabContent/classes/types.d.ts

@@ -1,6 +0,0 @@
-import { useTabContentUtilityClasses } from '.';
-export interface TabContentClassesType {
-    root: string;
-}
-export type TabContentClassesKey = keyof TabContentClassesType;
-export type Classes = ReturnType<typeof useTabContentUtilityClasses>;

package/components/mui_extended/TabContent/styles.d.ts

@@ -1 +0,0 @@
-export declare const TabContentRoot: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/mui_extended/TabContent/styles.js

@@ -1,7 +0,0 @@
-import { styled } from "@mui/material";
-const TabContentRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LTabContent?.styleOverrides || {}
-}));
-export {
-  TabContentRoot as T
-};