@m4l/components 9.1.58 → 9.1.59

package/components/PaperForm/PaperForm.d.ts

@@ -7,7 +7,7 @@ import { PaperFormProps } from './types';
  * **********************************************************************
  * @author Andrés Quintero - automatic
  * @createdAt 2024-11-20 14:00:24 - automatic
- * @updatedAt 2024-11-22 11:15:45 - automatic
- * @updatedUser Andrés Quintero - automatic
+ * @updatedAt 2025-01-08 15:43:10 - automatic
+ * @updatedUser cesar - automatic
  */
 export declare function PaperForm(props: PaperFormProps): import("react/jsx-runtime").JSX.Element;

package/components/PaperForm/PaperForm.js

@@ -4,14 +4,42 @@ import { P as PaperFormRootStyled, C as ContentStyled } from "./slots/PaperFormS
 import { useRef } from "react";
 import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
 import { P as PAPER_FORM_KEY } from "./constants.js";
+import { P as PropertyValue } from "../PropertyValue/PropertyValue.js";
+const isPropertyValue = (child) => typeof child === "object" && child !== null && "property" in child && "value" in child;
+const renderChildren = (children) => {
+  if (Array.isArray(children)) {
+    return children.map(
+      (child) => isPropertyValue(child) ? /* @__PURE__ */ jsx(PropertyValue, { ...child }, child.property) : child
+    );
+  }
+  return children;
+};
 function PaperForm(props) {
-  const { urlIcon, title, children, dataTestId, color = "default", size } = props;
+  const {
+    urlIcon,
+    title,
+    children,
+    dataTestId,
+    color = "default",
+    size = "medium",
+    isForm = false,
+    variant = "standard"
+  } = props;
   const paperFormRef = useRef(null);
   const rootClass = getComponentSlotRoot(PAPER_FORM_KEY);
-  return /* @__PURE__ */ jsxs(PaperFormRootStyled, { className: rootClass, ref: paperFormRef, ownerState: {}, ...process.env.NODE_ENV !== "production" ? { "data-testid": dataTestId } : {}, children: [
-    /* @__PURE__ */ jsx(Header, { urlIcon, title, color, size }),
-    /* @__PURE__ */ jsx(ContentStyled, { ownerState: {}, children })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    PaperFormRootStyled,
+    {
+      className: rootClass,
+      ref: paperFormRef,
+      ownerState: { isForm, color, variant },
+      ...process.env.NODE_ENV !== "production" ? { "data-testid": dataTestId } : {},
+      children: [
+        /* @__PURE__ */ jsx(Header, { urlIcon, title, color, size }),
+        /* @__PURE__ */ jsx(ContentStyled, { ownerState: { isForm }, children: renderChildren(children) })
+      ]
+    }
+  );
 }
 export {
   PaperForm as P

package/components/PaperForm/styles.js

@@ -6,8 +6,8 @@ const paperFormStyles = {
    ***********************************************************
    * @author Andrés Quintero - automatic
    * @createdAt 2024-11-20 14:00:24 - automatic
-   * @updatedAt 2024-11-22 10:38:00 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2025-01-08 10:46:48 - automatic
+   * @updatedUser cesar - automatic
    */
   paperFormRoot: ({ theme }) => ({
     borderRadius: theme.size.borderRadius.r1,
@@ -25,8 +25,8 @@ const paperFormStyles = {
    ***********************************************************
    * @author Andrés Quintero - automatic
    * @createdAt 2024-11-20 14:00:24 - automatic
-   * @updatedAt 2024-11-22 10:38:00 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2025-01-08 10:46:48 - automatic
+   * @updatedUser cesar - automatic
    */
   containerHeader: ({ theme, ownerState }) => ({
     display: "flex",
@@ -46,8 +46,8 @@ const paperFormStyles = {
    ***********************************************************
    * @author Andrés Quintero - automatic
    * @createdAt 2024-11-20 14:00:24 - automatic
-   * @updatedAt 2024-11-22 10:38:00 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2025-01-08 10:46:48 - automatic
+   * @updatedUser cesar - automatic
    */
   containerTitle: ({ theme }) => ({
     color: theme.vars.palette.text.primary,
@@ -65,8 +65,8 @@ const paperFormStyles = {
    ***********************************************************
    * @author Andrés Quintero - automatic
    * @createdAt 2024-11-20 14:00:24 - automatic
-   * @updatedAt 2024-11-22 10:38:00 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2025-01-08 10:46:48 - automatic
+   * @updatedUser cesar - automatic
    */
   containerIcon: () => ({
     display: "grid",
@@ -79,17 +79,18 @@ const paperFormStyles = {
    ***********************************************************
    * @author Andrés Quintero - automatic
    * @createdAt 2024-11-20 14:00:24 - automatic
-   * @updatedAt 2024-11-22 10:38:00 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2025-01-08 10:46:48 - automatic
+   * @updatedUser cesar - automatic
    */
   containerContent: ({ theme, ownerState }) => ({
     width: "100%",
     height: "auto",
     display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: ownerState.isForm ? theme.vars.size.baseSpacings.sp2 : theme.vars.size.baseSpacings.sp0,
+    flexDirection: ownerState.isForm ? "row" : "column",
+    alignItems: ownerState.isForm ? "flex-start" : "center",
+    justifyContent: ownerState.isForm ? "flex-start" : "center",
+    gap: ownerState.isForm ? theme.vars.size.baseSpacings.sp3 : theme.vars.size.baseSpacings.sp0,
+    flexWrap: ownerState.isForm ? "wrap" : "nowrap",
     padding: theme.vars.size.baseSpacings.sp3,
     background: theme.vars.palette.background.default
   })

package/components/PaperForm/types.d.ts

@@ -4,10 +4,11 @@ import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { PAPER_FORM_KEY } from './constants';
 import { Theme } from '@mui/material/styles';
 import { ComponentPalletColor, Sizes } from '@m4l/styles';
+import { PropertyValueProps } from '../PropertyValue/types';
 export interface PaperFormProps {
     urlIcon?: string;
     title: string;
-    children: ReactNode;
+    children?: ReactNode | PropertyValueProps[];
     variant?: 'standard';
     color?: Extract<ComponentPalletColor, 'default'>;
     size?: Extract<Sizes, 'small' | 'medium'>;

package/components/PropertyValue/PropertyValue.d.ts

@@ -3,7 +3,7 @@ import { PropertyValueProps } from './types';
  * PropertyValue component is used to display a property and its value in a form or not.
  * @author cesar - automatic
  * @createdAt 2024-12-19 14:44:17 - automatic
- * @updatedAt 2024-12-30 09:30:27 - automatic
+ * @updatedAt 2025-01-08 11:15:49 - automatic
  * @updatedUser cesar - automatic
  */
 export declare function PropertyValue(props: PropertyValueProps): import("react/jsx-runtime").JSX.Element;

package/components/PropertyValue/PropertyValue.js

@@ -5,7 +5,9 @@ import { T as TEST_PROPS_DATA, P as PROPERTY_VALUE_KEY_COMPONENT, C as COMPONENT
 import { a as getPropDataTestId, g as getNameDataTestId } from "../../test/getNameDataTestId.js";
 import { P as PropertyValueRootStyled, a as PropertyStyled, V as ValueStyled } from "./slots/PropertyValueSlots.js";
 import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
+import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
 import { L as Label } from "../Label/Label.js";
+import { T as TextField } from "../mui_extended/TextField/TextField.js";
 import { T as Typography } from "../mui_extended/Typography/Typography.js";
 import { I as Icon } from "../Icon/Icon.js";
 function PropertyValue(props) {
@@ -20,8 +22,11 @@ function PropertyValue(props) {
     mandatory,
     mandatoryMessage,
     helperMessage,
-    semanticWidth = "fullWidth"
+    semanticWidth = "fullWidth",
+    size = "medium"
   } = props;
+  const { currentSize } = useComponentSize(size);
+  const normalizedSize = currentSize === "large" ? "medium" : currentSize;
   const ownerState = {
     disabled: isForm && disabled ? disabled : false,
     isForm: isForm ? true : false,
@@ -42,8 +47,23 @@ function PropertyValue(props) {
     return startAdornment;
   };
   const renderValue = () => {
+    if (isForm) {
+      if (typeof value === "string" || typeof value === "number") {
+        return /* @__PURE__ */ jsx(
+          TextField,
+          {
+            size: normalizedSize,
+            defaultValue: value,
+            disabled,
+            helperText: helperMessage,
+            fullWidth: true
+          }
+        );
+      }
+      return value;
+    }
     if (typeof value === "string") {
-      return /* @__PURE__ */ jsx(Typography, { variant: "bodyDens", children: value });
+      return /* @__PURE__ */ jsx(Typography, { size: normalizedSize, variant: "bodyDens", children: value });
     }
     return value;
   };
@@ -64,6 +84,7 @@ function PropertyValue(props) {
           /* @__PURE__ */ jsx(
             Label,
             {
+              size: normalizedSize,
               label: property,
               mandatory,
               mandatoryMessage,
@@ -71,14 +92,7 @@ function PropertyValue(props) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx(
-          ValueStyled,
-          {
-            role: "property-value-value-role",
-            ownerState,
-            children: renderValue()
-          }
-        )
+        /* @__PURE__ */ jsx(ValueStyled, { role: "property-value-value-role", ownerState, children: renderValue() })
       ]
     }
   );

package/components/PropertyValue/types.d.ts

@@ -4,6 +4,7 @@ import { PROPERTY_VALUE_KEY_COMPONENT } from './constants';
 import { Theme } from '@mui/material';
 import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { PropertyValueSlots } from './slots/PropertyValueEnum';
+import { Sizes } from '@m4l/styles';
 /**
  * Tipos de valores posibles para los componentes dentro de `PropertyValue`.
  */
@@ -77,6 +78,10 @@ export interface PropertyValueProps extends PropertyProps, ValueProps, Omit<Labe
      * Define el ancho semántico del componente según el contenido.
      */
     semanticWidth?: SemanticWidthOptions;
+    /**
+     * Propiedad de tamaño para el componente `PropertyValue`.
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
 }
 /**
  * Estado del propietario para el componente `PropertyValue`, utilizado para personalizar estilos y comportamientos.

package/package.json

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