@multiplatform.one/frappe-ui 7.34.4 → 7.36.0

package/dist/esm/record/RecordHero.mjs

@@ -1,56 +1,38 @@
-import { Skeleton, Text, XStack, YStack } from "@multiplatform.one/components";
-import { Progress } from "@multiplatform.one/forms";
+import { Skeleton, TamaguiSizableText, Text, XStack, YStack } from "@multiplatform.one/components";
 import { sizeRecipeEscape, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useTranslation } from "react-i18next";
 import { jsx, jsxs } from "react/jsx-runtime";
-const recordHeroArtBasis = 380;
-const recordHeroArtMax = 480;
-const recordHeroIdentityBasis = 320;
+const recordHeroStageHeight = 250;
+const recordHeroArtHeight = 220;
 function RecordHeroFrame({
-  tint,
+  tints = [],
   children,
   ...rest
 }) {
   const {
     knobProps
   } = useResolvedKnobs();
-  return /* @__PURE__ */jsx(YStack, {
-    ...knobProps.borderRadius,
-    ...knobProps.panelPadding,
-    backgroundColor: tint ? `$${tint}2` : "$color3",
+  const [first, second] = tints;
+  return /* @__PURE__ */jsxs(YStack, {
     width: "100%",
+    minHeight: sizeRecipeEscape(recordHeroStageHeight, "hero stage: the design's art band"),
+    paddingTop: knobProps.gap.gap,
+    backgroundColor: second ? "transparent" : first ? `$${first}3` : "$color3",
+    overflow: "hidden",
+    position: "relative",
+    "data-record-art-band": "",
     ...rest,
-    children
-  });
-}
-function RecordHeroRow({
-  children
-}) {
-  const {
-    knobProps
-  } = useResolvedKnobs();
-  return /* @__PURE__ */jsx(XStack, {
-    ...knobProps.gapLg,
-    flexWrap: "wrap",
-    alignItems: "flex-start",
-    children
-  });
-}
-function RecordHeroArtColumn({
-  children,
-  ...rest
-}) {
-  const {
-    knobProps
-  } = useResolvedKnobs();
-  return /* @__PURE__ */jsx(YStack, {
-    flexGrow: 1,
-    flexBasis: recordHeroArtBasis,
-    maxWidth: recordHeroArtMax,
-    minWidth: 0,
-    ...knobProps.gap,
-    ...rest,
-    children
+    children: [second ? /* @__PURE__ */jsxs(XStack, {
+      fullscreen: true,
+      pointerEvents: "none",
+      children: [/* @__PURE__ */jsx(YStack, {
+        flex: 1,
+        backgroundColor: `$${first ?? "gray"}3`
+      }), /* @__PURE__ */jsx(YStack, {
+        flex: 1,
+        backgroundColor: `$${second}3`
+      })]
+    }) : null, children]
   });
 }
 function RecordHeroIdentityColumn({
@@ -61,10 +43,10 @@ function RecordHeroIdentityColumn({
     knobProps
   } = useResolvedKnobs();
   return /* @__PURE__ */jsx(YStack, {
-    flexGrow: 999,
-    flexBasis: recordHeroIdentityBasis,
+    ...knobProps.panelPadding,
+    paddingBottom: 0,
+    gap: "$1",
     minWidth: 0,
-    ...knobProps.gap,
     ...rest,
     children
   });
@@ -74,53 +56,34 @@ function RecordVitals({
 }) {
   const {
     knobProps
-  } = useResolvedKnobs({
-    compact: true
-  });
+  } = useResolvedKnobs();
   if (tiles.length === 0) return null;
   return /* @__PURE__ */jsx(XStack, {
-    ...knobProps.gap,
+    columnGap: knobProps.gapLg.gap,
+    rowGap: knobProps.gap.gap,
     flexWrap: "wrap",
+    paddingTop: knobProps.gap.gap,
+    "data-record-metrics": "",
     children: tiles.map(tile => /* @__PURE__ */jsxs(YStack, {
-      ...knobProps.borderRadius,
-      ...knobProps.panelPadding,
-      backgroundColor: "$color2",
-      borderWidth: 0,
-      flexGrow: 1,
-      flexBasis: 140,
       gap: "$1",
+      testID: `record-vital-${tile.id}`,
+      "data-record-metric": tile.id,
       children: [/* @__PURE__ */jsx(Text, {
         ...knobProps.label,
-        ...knobProps.body,
-        color: "$color10",
+        color: "$color11",
+        numberOfLines: 1,
         children: tile.label
-      }), /* @__PURE__ */jsx(Text, {
-        fontSize: "$5",
-        fontWeight: "700",
+      }), /* @__PURE__ */jsx(TamaguiSizableText, {
+        size: "$6",
+        ...knobProps.heading,
+        color: "$color",
+        numberOfLines: 1,
         children: tile.value
-      }), tile.percent === void 0 ? null : /* @__PURE__ */jsx(Progress, {
-        value: tile.percent,
-        max: 100,
-        size: "$2",
-        intent: "accent",
-        progressProps: {
-          "aria-label": tile.label
-        }
       })]
     }, tile.id))
   });
 }
 const bone = px => sizeRecipeEscape(px, "loading bones sized to the record page they stand in for");
-function RecordBreadcrumbBone() {
-  return /* @__PURE__ */jsx(XStack, {
-    alignItems: "center",
-    minHeight: bone(20),
-    children: /* @__PURE__ */jsx(Skeleton, {
-      width: bone(180),
-      height: bone(14)
-    })
-  });
-}
 function RecordSkeleton({
   testID
 }) {
@@ -131,75 +94,83 @@ function RecordSkeleton({
     knobProps
   } = useResolvedKnobs();
   return /* @__PURE__ */jsxs(YStack, {
-    ...knobProps.gapLg,
     testID,
     "data-async-skeleton": "record",
     "aria-busy": true,
     "aria-label": t("Loading"),
     children: [/* @__PURE__ */jsx(RecordHeroFrame, {
-      children: /* @__PURE__ */jsxs(RecordHeroRow, {
-        children: [/* @__PURE__ */jsx(RecordHeroArtColumn, {
-          ...{
-            "data-skeleton-part": "art"
-          },
-          children: /* @__PURE__ */jsx(Skeleton, {
-            variant: "rounded",
-            width: "100%",
-            aspectRatio: 1
-          })
-        }), /* @__PURE__ */jsxs(RecordHeroIdentityColumn, {
-          ...{
-            "data-skeleton-part": "identity"
-          },
+      ...{
+        "data-skeleton-part": "art"
+      },
+      children: /* @__PURE__ */jsx(YStack, {
+        alignItems: "center",
+        children: /* @__PURE__ */jsx(Skeleton, {
+          variant: "rounded",
+          width: bone(recordHeroArtHeight),
+          height: bone(recordHeroArtHeight)
+        })
+      })
+    }), /* @__PURE__ */jsxs(RecordHeroIdentityColumn, {
+      ...{
+        "data-skeleton-part": "identity"
+      },
+      children: [/* @__PURE__ */jsxs(XStack, {
+        gap: "$2",
+        children: [/* @__PURE__ */jsx(Skeleton, {
+          width: bone(40),
+          height: bone(20)
+        }), /* @__PURE__ */jsx(Skeleton, {
+          variant: "rounded",
+          width: bone(56),
+          height: bone(22)
+        }), /* @__PURE__ */jsx(Skeleton, {
+          variant: "rounded",
+          width: bone(56),
+          height: bone(22)
+        })]
+      }), /* @__PURE__ */jsx(Skeleton, {
+        width: bone(220),
+        height: bone(40)
+      }), /* @__PURE__ */jsx(Skeleton, {
+        width: bone(140),
+        height: bone(18)
+      }), /* @__PURE__ */jsx(XStack, {
+        columnGap: knobProps.gapLg.gap,
+        paddingTop: knobProps.gap.gap,
+        children: [0, 1, 2].map(tile => /* @__PURE__ */jsxs(YStack, {
+          gap: "$1",
           children: [/* @__PURE__ */jsx(Skeleton, {
-            width: bone(72),
-            height: bone(16)
+            width: bone(56),
+            height: bone(14)
           }), /* @__PURE__ */jsx(Skeleton, {
-            width: bone(280),
-            height: bone(56)
-          }), /* @__PURE__ */jsx(Skeleton, {
-            width: bone(160),
-            height: bone(18)
-          }), /* @__PURE__ */jsxs(XStack, {
-            gap: "$1.5",
-            children: [/* @__PURE__ */jsx(Skeleton, {
-              variant: "rounded",
-              width: bone(64),
-              height: bone(22)
-            }), /* @__PURE__ */jsx(Skeleton, {
-              variant: "rounded",
-              width: bone(64),
-              height: bone(22)
-            })]
-          }), /* @__PURE__ */jsx(XStack, {
-            ...knobProps.gap,
-            flexWrap: "wrap",
-            children: [0, 1, 2].map(tile => /* @__PURE__ */jsx(Skeleton, {
-              variant: "rounded",
-              flexGrow: 1,
-              flexBasis: 140,
-              height: bone(64)
-            }, tile))
+            width: bone(48),
+            height: bone(22)
           })]
-        })]
-      })
+        }, tile))
+      })]
     }), /* @__PURE__ */jsxs(YStack, {
-      ...knobProps.gap,
+      ...knobProps.gapLg,
+      paddingTop: knobProps.panelPadding.padding,
       children: [/* @__PURE__ */jsx(XStack, {
-        ...knobProps.gap,
+        ...knobProps.gapLg,
+        ...knobProps.panelPadding,
+        paddingVertical: 0,
         ...{
           "data-skeleton-part": "tabs"
         },
-        children: [104, 88, 96].map((width, tab) => /* @__PURE__ */jsx(Skeleton, {
-          variant: "rounded",
+        children: [96, 64, 88].map((width, tab) => /* @__PURE__ */jsx(Skeleton, {
           width: bone(width),
-          height: bone(44)
+          height: bone(40)
         }, tab))
-      }), /* @__PURE__ */jsx(Skeleton.Text, {
-        lines: 4
+      }), /* @__PURE__ */jsx(YStack, {
+        ...knobProps.panelPadding,
+        paddingVertical: 0,
+        children: /* @__PURE__ */jsx(Skeleton.Text, {
+          lines: 4
+        })
       })]
     })]
   });
 }
-export { RecordBreadcrumbBone, RecordHeroArtColumn, RecordHeroFrame, RecordHeroIdentityColumn, RecordHeroRow, RecordSkeleton, RecordVitals, recordHeroArtBasis, recordHeroArtMax, recordHeroIdentityBasis };
+export { RecordHeroFrame, RecordHeroIdentityColumn, RecordSkeleton, RecordVitals, recordHeroArtHeight, recordHeroStageHeight };
 //# sourceMappingURL=RecordHero.mjs.map

package/dist/esm/record/RecordHero.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["Skeleton","Text","XStack","YStack","Progress","sizeRecipeEscape","useResolvedKnobs","useTranslation","jsx","jsxs","recordHeroArtBasis","recordHeroArtMax","recordHeroIdentityBasis","RecordHeroFrame","tint","children","rest","knobProps","borderRadius","panelPadding","backgroundColor","width","RecordHeroRow","gapLg","flexWrap","alignItems","RecordHeroArtColumn","flexGrow","flexBasis","maxWidth","minWidth","gap","RecordHeroIdentityColumn","RecordVitals","tiles","compact","length","map","tile","borderWidth","label","body","color","fontSize","fontWeight","value","percent","max","size","intent","progressProps","id","bone","px","RecordBreadcrumbBone","minHeight","height","RecordSkeleton","testID","t","variant","aspectRatio","tab","lines"],"sources":["../../../src/record/RecordHero.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Skeleton","TamaguiSizableText","Text","XStack","YStack","sizeRecipeEscape","useResolvedKnobs","useTranslation","jsx","jsxs","recordHeroStageHeight","recordHeroArtHeight","RecordHeroFrame","tints","children","rest","knobProps","first","second","width","minHeight","paddingTop","gap","backgroundColor","overflow","position","fullscreen","pointerEvents","flex","RecordHeroIdentityColumn","panelPadding","paddingBottom","minWidth","RecordVitals","tiles","length","columnGap","gapLg","rowGap","flexWrap","map","tile","testID","id","label","color","numberOfLines","size","heading","value","bone","px","RecordSkeleton","t","alignItems","variant","height","padding","paddingVertical","tab","lines"],"sources":["../../../src/record/RecordHero.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/record/RecordHero.native.js

@@ -1,59 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Skeleton, Text, XStack, YStack } from "@multiplatform.one/components";
-import { Progress } from "@multiplatform.one/forms";
+import { Skeleton, TamaguiSizableText, Text, XStack, YStack } from "@multiplatform.one/components";
 import { sizeRecipeEscape, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useTranslation } from "react-i18next";
-var recordHeroArtBasis = 380;
-var recordHeroArtMax = 480;
-var recordHeroIdentityBasis = 320;
+var recordHeroStageHeight = 250;
+var recordHeroArtHeight = 220;
 function RecordHeroFrame(param) {
   var {
-    tint,
+    tints = [],
     children,
     ...rest
   } = param;
   var {
     knobProps
   } = useResolvedKnobs();
-  return /* @__PURE__ */_jsx(YStack, {
-    ...knobProps.borderRadius,
-    ...knobProps.panelPadding,
-    backgroundColor: tint ? `$${tint}2` : "$color3",
+  var [first, second] = tints;
+  return /* @__PURE__ */_jsxs(YStack, {
     width: "100%",
+    minHeight: sizeRecipeEscape(recordHeroStageHeight, "hero stage: the design's art band"),
+    paddingTop: knobProps.gap.gap,
+    backgroundColor: second ? "transparent" : first ? `$${first}3` : "$color3",
+    overflow: "hidden",
+    position: "relative",
+    "data-record-art-band": "",
     ...rest,
-    children
-  });
-}
-function RecordHeroRow(param) {
-  var {
-    children
-  } = param;
-  var {
-    knobProps
-  } = useResolvedKnobs();
-  return /* @__PURE__ */_jsx(XStack, {
-    ...knobProps.gapLg,
-    flexWrap: "wrap",
-    alignItems: "flex-start",
-    children
-  });
-}
-function RecordHeroArtColumn(param) {
-  var {
-    children,
-    ...rest
-  } = param;
-  var {
-    knobProps
-  } = useResolvedKnobs();
-  return /* @__PURE__ */_jsx(YStack, {
-    flexGrow: 1,
-    flexBasis: recordHeroArtBasis,
-    maxWidth: recordHeroArtMax,
-    minWidth: 0,
-    ...knobProps.gap,
-    ...rest,
-    children
+    children: [second ? /* @__PURE__ */_jsxs(XStack, {
+      fullscreen: true,
+      pointerEvents: "none",
+      children: [/* @__PURE__ */_jsx(YStack, {
+        flex: 1,
+        backgroundColor: `$${first !== null && first !== void 0 ? first : "gray"}3`
+      }), /* @__PURE__ */_jsx(YStack, {
+        flex: 1,
+        backgroundColor: `$${second}3`
+      })]
+    }) : null, children]
   });
 }
 function RecordHeroIdentityColumn(param) {
@@ -65,10 +45,10 @@ function RecordHeroIdentityColumn(param) {
     knobProps
   } = useResolvedKnobs();
   return /* @__PURE__ */_jsx(YStack, {
-    flexGrow: 999,
-    flexBasis: recordHeroIdentityBasis,
+    ...knobProps.panelPadding,
+    paddingBottom: 0,
+    gap: "$1",
     minWidth: 0,
-    ...knobProps.gap,
     ...rest,
     children
   });
@@ -79,39 +59,30 @@ function RecordVitals(param) {
   } = param;
   var {
     knobProps
-  } = useResolvedKnobs({
-    compact: true
-  });
+  } = useResolvedKnobs();
   if (tiles.length === 0) return null;
   return /* @__PURE__ */_jsx(XStack, {
-    ...knobProps.gap,
+    columnGap: knobProps.gapLg.gap,
+    rowGap: knobProps.gap.gap,
     flexWrap: "wrap",
+    paddingTop: knobProps.gap.gap,
+    "data-record-metrics": "",
     children: tiles.map(function (tile) {
       return /* @__PURE__ */_jsxs(YStack, {
-        ...knobProps.borderRadius,
-        ...knobProps.panelPadding,
-        backgroundColor: "$color2",
-        borderWidth: 0,
-        flexGrow: 1,
-        flexBasis: 140,
         gap: "$1",
+        testID: `record-vital-${tile.id}`,
+        "data-record-metric": tile.id,
         children: [/* @__PURE__ */_jsx(Text, {
           ...knobProps.label,
-          ...knobProps.body,
-          color: "$color10",
+          color: "$color11",
+          numberOfLines: 1,
           children: tile.label
-        }), /* @__PURE__ */_jsx(Text, {
-          fontSize: "$5",
-          fontWeight: "700",
+        }), /* @__PURE__ */_jsx(TamaguiSizableText, {
+          size: "$6",
+          ...knobProps.heading,
+          color: "$color",
+          numberOfLines: 1,
           children: tile.value
-        }), tile.percent === void 0 ? null : /* @__PURE__ */_jsx(Progress, {
-          value: tile.percent,
-          max: 100,
-          size: "$2",
-          intent: "accent",
-          progressProps: {
-            "aria-label": tile.label
-          }
         })]
       }, tile.id);
     })
@@ -120,16 +91,6 @@ function RecordVitals(param) {
 var bone = function bone2(px) {
   return sizeRecipeEscape(px, "loading bones sized to the record page they stand in for");
 };
-function RecordBreadcrumbBone() {
-  return /* @__PURE__ */_jsx(XStack, {
-    alignItems: "center",
-    minHeight: bone(20),
-    children: /* @__PURE__ */_jsx(Skeleton, {
-      width: bone(180),
-      height: bone(14)
-    })
-  });
-}
 function RecordSkeleton(param) {
   var {
     testID
@@ -141,73 +102,81 @@ function RecordSkeleton(param) {
     knobProps
   } = useResolvedKnobs();
   return /* @__PURE__ */_jsxs(YStack, {
-    ...knobProps.gapLg,
     testID,
     "data-async-skeleton": "record",
     "aria-busy": true,
     "aria-label": t("Loading"),
     children: [/* @__PURE__ */_jsx(RecordHeroFrame, {
-      children: /* @__PURE__ */_jsxs(RecordHeroRow, {
-        children: [/* @__PURE__ */_jsx(RecordHeroArtColumn, {
-          "data-skeleton-part": "art",
-          children: /* @__PURE__ */_jsx(Skeleton, {
-            variant: "rounded",
-            width: "100%",
-            aspectRatio: 1
-          })
-        }), /* @__PURE__ */_jsxs(RecordHeroIdentityColumn, {
-          "data-skeleton-part": "identity",
-          children: [/* @__PURE__ */_jsx(Skeleton, {
-            width: bone(72),
-            height: bone(16)
-          }), /* @__PURE__ */_jsx(Skeleton, {
-            width: bone(280),
-            height: bone(56)
-          }), /* @__PURE__ */_jsx(Skeleton, {
-            width: bone(160),
-            height: bone(18)
-          }), /* @__PURE__ */_jsxs(XStack, {
-            gap: "$1.5",
+      "data-skeleton-part": "art",
+      children: /* @__PURE__ */_jsx(YStack, {
+        alignItems: "center",
+        children: /* @__PURE__ */_jsx(Skeleton, {
+          variant: "rounded",
+          width: bone(recordHeroArtHeight),
+          height: bone(recordHeroArtHeight)
+        })
+      })
+    }), /* @__PURE__ */_jsxs(RecordHeroIdentityColumn, {
+      "data-skeleton-part": "identity",
+      children: [/* @__PURE__ */_jsxs(XStack, {
+        gap: "$2",
+        children: [/* @__PURE__ */_jsx(Skeleton, {
+          width: bone(40),
+          height: bone(20)
+        }), /* @__PURE__ */_jsx(Skeleton, {
+          variant: "rounded",
+          width: bone(56),
+          height: bone(22)
+        }), /* @__PURE__ */_jsx(Skeleton, {
+          variant: "rounded",
+          width: bone(56),
+          height: bone(22)
+        })]
+      }), /* @__PURE__ */_jsx(Skeleton, {
+        width: bone(220),
+        height: bone(40)
+      }), /* @__PURE__ */_jsx(Skeleton, {
+        width: bone(140),
+        height: bone(18)
+      }), /* @__PURE__ */_jsx(XStack, {
+        columnGap: knobProps.gapLg.gap,
+        paddingTop: knobProps.gap.gap,
+        children: [0, 1, 2].map(function (tile) {
+          return /* @__PURE__ */_jsxs(YStack, {
+            gap: "$1",
             children: [/* @__PURE__ */_jsx(Skeleton, {
-              variant: "rounded",
-              width: bone(64),
-              height: bone(22)
+              width: bone(56),
+              height: bone(14)
             }), /* @__PURE__ */_jsx(Skeleton, {
-              variant: "rounded",
-              width: bone(64),
+              width: bone(48),
               height: bone(22)
             })]
-          }), /* @__PURE__ */_jsx(XStack, {
-            ...knobProps.gap,
-            flexWrap: "wrap",
-            children: [0, 1, 2].map(function (tile) {
-              return /* @__PURE__ */_jsx(Skeleton, {
-                variant: "rounded",
-                flexGrow: 1,
-                flexBasis: 140,
-                height: bone(64)
-              }, tile);
-            })
-          })]
-        })]
-      })
+          }, tile);
+        })
+      })]
     }), /* @__PURE__ */_jsxs(YStack, {
-      ...knobProps.gap,
+      ...knobProps.gapLg,
+      paddingTop: knobProps.panelPadding.padding,
       children: [/* @__PURE__ */_jsx(XStack, {
-        ...knobProps.gap,
+        ...knobProps.gapLg,
+        ...knobProps.panelPadding,
+        paddingVertical: 0,
         "data-skeleton-part": "tabs",
-        children: [104, 88, 96].map(function (width, tab) {
+        children: [96, 64, 88].map(function (width, tab) {
           return /* @__PURE__ */_jsx(Skeleton, {
-            variant: "rounded",
             width: bone(width),
-            height: bone(44)
+            height: bone(40)
           }, tab);
         })
-      }), /* @__PURE__ */_jsx(Skeleton.Text, {
-        lines: 4
+      }), /* @__PURE__ */_jsx(YStack, {
+        ...knobProps.panelPadding,
+        paddingVertical: 0,
+        children: /* @__PURE__ */_jsx(Skeleton.Text, {
+          lines: 4
+        })
       })]
     })]
   });
 }
-export { RecordBreadcrumbBone, RecordHeroArtColumn, RecordHeroFrame, RecordHeroIdentityColumn, RecordHeroRow, RecordSkeleton, RecordVitals, recordHeroArtBasis, recordHeroArtMax, recordHeroIdentityBasis };
+export { RecordHeroFrame, RecordHeroIdentityColumn, RecordSkeleton, RecordVitals, recordHeroArtHeight, recordHeroStageHeight };
 //# sourceMappingURL=RecordHero.native.js.map