@multiplatform.one/frappe-ui 7.34.3 → 7.35.0

package/dist/cjs/record/RecordHero.cjs

@@ -22,71 +22,49 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var RecordHero_exports = {};
 __export(RecordHero_exports, {
-  RecordBreadcrumbBone: () => RecordBreadcrumbBone,
-  RecordHeroArtColumn: () => RecordHeroArtColumn,
   RecordHeroFrame: () => RecordHeroFrame,
   RecordHeroIdentityColumn: () => RecordHeroIdentityColumn,
-  RecordHeroRow: () => RecordHeroRow,
   RecordSkeleton: () => RecordSkeleton,
   RecordVitals: () => RecordVitals,
-  recordHeroArtBasis: () => recordHeroArtBasis,
-  recordHeroArtMax: () => recordHeroArtMax,
-  recordHeroIdentityBasis: () => recordHeroIdentityBasis
+  recordHeroArtHeight: () => recordHeroArtHeight,
+  recordHeroStageHeight: () => recordHeroStageHeight
 });
 module.exports = __toCommonJS(RecordHero_exports);
 var import_components = require("@multiplatform.one/components");
-var import_forms = require("@multiplatform.one/forms");
 var import_theme = require("@multiplatform.one/theme");
 var import_react_i18next = require("react-i18next");
 var import_jsx_runtime = require("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
   } = (0, import_theme.useResolvedKnobs)();
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
-    ...knobProps.borderRadius,
-    ...knobProps.panelPadding,
-    backgroundColor: tint ? `$${tint}2` : "$color3",
+  const [first, second] = tints;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
     width: "100%",
+    minHeight: (0, import_theme.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
-  } = (0, import_theme.useResolvedKnobs)();
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
-    ...knobProps.gapLg,
-    flexWrap: "wrap",
-    alignItems: "flex-start",
-    children
-  });
-}
-function RecordHeroArtColumn({
-  children,
-  ...rest
-}) {
-  const {
-    knobProps
-  } = (0, import_theme.useResolvedKnobs)();
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
-    flexGrow: 1,
-    flexBasis: recordHeroArtBasis,
-    maxWidth: recordHeroArtMax,
-    minWidth: 0,
-    ...knobProps.gap,
-    ...rest,
-    children
+    children: [second ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      fullscreen: true,
+      pointerEvents: "none",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        flex: 1,
+        backgroundColor: `$${first ?? "gray"}3`
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        flex: 1,
+        backgroundColor: `$${second}3`
+      })]
+    }) : null, children]
   });
 }
 function RecordHeroIdentityColumn({
@@ -97,10 +75,10 @@ function RecordHeroIdentityColumn({
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
-    flexGrow: 999,
-    flexBasis: recordHeroIdentityBasis,
+    ...knobProps.panelPadding,
+    paddingBottom: 0,
+    gap: "$1",
     minWidth: 0,
-    ...knobProps.gap,
     ...rest,
     children
   });
@@ -110,53 +88,34 @@ function RecordVitals({
 }) {
   const {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)({
-    compact: true
-  });
+  } = (0, import_theme.useResolvedKnobs)();
   if (tiles.length === 0) return null;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.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__ */(0, import_jsx_runtime.jsxs)(import_components.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__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
         ...knobProps.label,
-        ...knobProps.body,
-        color: "$color10",
+        color: "$color11",
+        numberOfLines: 1,
         children: tile.label
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
-        fontSize: "$5",
-        fontWeight: "700",
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.TamaguiSizableText, {
+        size: "$6",
+        ...knobProps.heading,
+        color: "$color",
+        numberOfLines: 1,
         children: tile.value
-      }), tile.percent === void 0 ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Progress, {
-        value: tile.percent,
-        max: 100,
-        size: "$2",
-        intent: "accent",
-        progressProps: {
-          "aria-label": tile.label
-        }
       })]
     }, tile.id))
   });
 }
 const bone = px => (0, import_theme.sizeRecipeEscape)(px, "loading bones sized to the record page they stand in for");
-function RecordBreadcrumbBone() {
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
-    alignItems: "center",
-    minHeight: bone(20),
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
-      width: bone(180),
-      height: bone(14)
-    })
-  });
-}
 function RecordSkeleton({
   testID
 }) {
@@ -167,72 +126,80 @@ function RecordSkeleton({
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
-    ...knobProps.gapLg,
     testID,
     "data-async-skeleton": "record",
     "aria-busy": true,
     "aria-label": t("Loading"),
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(RecordHeroFrame, {
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(RecordHeroRow, {
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(RecordHeroArtColumn, {
-          ...{
-            "data-skeleton-part": "art"
-          },
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
-            variant: "rounded",
-            width: "100%",
-            aspectRatio: 1
-          })
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(RecordHeroIdentityColumn, {
-          ...{
-            "data-skeleton-part": "identity"
-          },
+      ...{
+        "data-skeleton-part": "art"
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        alignItems: "center",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
+          variant: "rounded",
+          width: bone(recordHeroArtHeight),
+          height: bone(recordHeroArtHeight)
+        })
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(RecordHeroIdentityColumn, {
+      ...{
+        "data-skeleton-part": "identity"
+      },
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+        gap: "$2",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
+          width: bone(40),
+          height: bone(20)
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
+          variant: "rounded",
+          width: bone(56),
+          height: bone(22)
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
+          variant: "rounded",
+          width: bone(56),
+          height: bone(22)
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
+        width: bone(220),
+        height: bone(40)
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
+        width: bone(140),
+        height: bone(18)
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+        columnGap: knobProps.gapLg.gap,
+        paddingTop: knobProps.gap.gap,
+        children: [0, 1, 2].map(tile => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+          gap: "$1",
           children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
-            width: bone(72),
-            height: bone(16)
+            width: bone(56),
+            height: bone(14)
           }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
-            width: bone(280),
-            height: bone(56)
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
-            width: bone(160),
-            height: bone(18)
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
-            gap: "$1.5",
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
-              variant: "rounded",
-              width: bone(64),
-              height: bone(22)
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
-              variant: "rounded",
-              width: bone(64),
-              height: bone(22)
-            })]
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
-            ...knobProps.gap,
-            flexWrap: "wrap",
-            children: [0, 1, 2].map(tile => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
-              variant: "rounded",
-              flexGrow: 1,
-              flexBasis: 140,
-              height: bone(64)
-            }, tile))
+            width: bone(48),
+            height: bone(22)
           })]
-        })]
-      })
+        }, tile))
+      })]
     }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
-      ...knobProps.gap,
+      ...knobProps.gapLg,
+      paddingTop: knobProps.panelPadding.padding,
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
-        ...knobProps.gap,
+        ...knobProps.gapLg,
+        ...knobProps.panelPadding,
+        paddingVertical: 0,
         ...{
           "data-skeleton-part": "tabs"
         },
-        children: [104, 88, 96].map((width, tab) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
-          variant: "rounded",
+        children: [96, 64, 88].map((width, tab) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
           width: bone(width),
-          height: bone(44)
+          height: bone(40)
         }, tab))
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton.Text, {
-        lines: 4
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        ...knobProps.panelPadding,
+        paddingVertical: 0,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton.Text, {
+          lines: 4
+        })
       })]
     })]
   });

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

@@ -24,74 +24,50 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var RecordHero_exports = {};
 __export(RecordHero_exports, {
-  RecordBreadcrumbBone: () => RecordBreadcrumbBone,
-  RecordHeroArtColumn: () => RecordHeroArtColumn,
   RecordHeroFrame: () => RecordHeroFrame,
   RecordHeroIdentityColumn: () => RecordHeroIdentityColumn,
-  RecordHeroRow: () => RecordHeroRow,
   RecordSkeleton: () => RecordSkeleton,
   RecordVitals: () => RecordVitals,
-  recordHeroArtBasis: () => recordHeroArtBasis,
-  recordHeroArtMax: () => recordHeroArtMax,
-  recordHeroIdentityBasis: () => recordHeroIdentityBasis
+  recordHeroArtHeight: () => recordHeroArtHeight,
+  recordHeroStageHeight: () => recordHeroStageHeight
 });
 module.exports = __toCommonJS(RecordHero_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_components = require("@multiplatform.one/components");
-var import_forms = require("@multiplatform.one/forms");
 var import_theme = require("@multiplatform.one/theme");
 var import_react_i18next = require("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
   } = (0, import_theme.useResolvedKnobs)();
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
-    ...knobProps.borderRadius,
-    ...knobProps.panelPadding,
-    backgroundColor: tint ? `$${tint}2` : "$color3",
+  var [first, second] = tints;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
     width: "100%",
+    minHeight: (0, import_theme.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
-  } = (0, import_theme.useResolvedKnobs)();
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
-    ...knobProps.gapLg,
-    flexWrap: "wrap",
-    alignItems: "flex-start",
-    children
-  });
-}
-function RecordHeroArtColumn(param) {
-  var {
-    children,
-    ...rest
-  } = param;
-  var {
-    knobProps
-  } = (0, import_theme.useResolvedKnobs)();
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
-    flexGrow: 1,
-    flexBasis: recordHeroArtBasis,
-    maxWidth: recordHeroArtMax,
-    minWidth: 0,
-    ...knobProps.gap,
-    ...rest,
-    children
+    children: [second ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      fullscreen: true,
+      pointerEvents: "none",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        flex: 1,
+        backgroundColor: `$${first !== null && first !== void 0 ? first : "gray"}3`
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        flex: 1,
+        backgroundColor: `$${second}3`
+      })]
+    }) : null, children]
   });
 }
 function RecordHeroIdentityColumn(param) {
@@ -103,10 +79,10 @@ function RecordHeroIdentityColumn(param) {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
-    flexGrow: 999,
-    flexBasis: recordHeroIdentityBasis,
+    ...knobProps.panelPadding,
+    paddingBottom: 0,
+    gap: "$1",
     minWidth: 0,
-    ...knobProps.gap,
     ...rest,
     children
   });
@@ -117,39 +93,30 @@ function RecordVitals(param) {
   } = param;
   var {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)({
-    compact: true
-  });
+  } = (0, import_theme.useResolvedKnobs)();
   if (tiles.length === 0) return null;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.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__ */(0, import_jsx_runtime.jsxs)(import_components.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__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
           ...knobProps.label,
-          ...knobProps.body,
-          color: "$color10",
+          color: "$color11",
+          numberOfLines: 1,
           children: tile.label
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
-          fontSize: "$5",
-          fontWeight: "700",
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.TamaguiSizableText, {
+          size: "$6",
+          ...knobProps.heading,
+          color: "$color",
+          numberOfLines: 1,
           children: tile.value
-        }), tile.percent === void 0 ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Progress, {
-          value: tile.percent,
-          max: 100,
-          size: "$2",
-          intent: "accent",
-          progressProps: {
-            "aria-label": tile.label
-          }
         })]
       }, tile.id);
     })
@@ -158,16 +125,6 @@ function RecordVitals(param) {
 var bone = function bone2(px) {
   return (0, import_theme.sizeRecipeEscape)(px, "loading bones sized to the record page they stand in for");
 };
-function RecordBreadcrumbBone() {
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
-    alignItems: "center",
-    minHeight: bone(20),
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
-      width: bone(180),
-      height: bone(14)
-    })
-  });
-}
 function RecordSkeleton(param) {
   var {
     testID
@@ -179,70 +136,78 @@ function RecordSkeleton(param) {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
-    ...knobProps.gapLg,
     testID,
     "data-async-skeleton": "record",
     "aria-busy": true,
     "aria-label": t("Loading"),
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(RecordHeroFrame, {
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(RecordHeroRow, {
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(RecordHeroArtColumn, {
-          "data-skeleton-part": "art",
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
-            variant: "rounded",
-            width: "100%",
-            aspectRatio: 1
-          })
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(RecordHeroIdentityColumn, {
-          "data-skeleton-part": "identity",
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
-            width: bone(72),
-            height: bone(16)
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
-            width: bone(280),
-            height: bone(56)
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
-            width: bone(160),
-            height: bone(18)
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
-            gap: "$1.5",
+      "data-skeleton-part": "art",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        alignItems: "center",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
+          variant: "rounded",
+          width: bone(recordHeroArtHeight),
+          height: bone(recordHeroArtHeight)
+        })
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(RecordHeroIdentityColumn, {
+      "data-skeleton-part": "identity",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+        gap: "$2",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
+          width: bone(40),
+          height: bone(20)
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
+          variant: "rounded",
+          width: bone(56),
+          height: bone(22)
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
+          variant: "rounded",
+          width: bone(56),
+          height: bone(22)
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
+        width: bone(220),
+        height: bone(40)
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
+        width: bone(140),
+        height: bone(18)
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+        columnGap: knobProps.gapLg.gap,
+        paddingTop: knobProps.gap.gap,
+        children: [0, 1, 2].map(function (tile) {
+          return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+            gap: "$1",
             children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
-              variant: "rounded",
-              width: bone(64),
-              height: bone(22)
+              width: bone(56),
+              height: bone(14)
             }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
-              variant: "rounded",
-              width: bone(64),
+              width: bone(48),
               height: bone(22)
             })]
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
-            ...knobProps.gap,
-            flexWrap: "wrap",
-            children: [0, 1, 2].map(function (tile) {
-              return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
-                variant: "rounded",
-                flexGrow: 1,
-                flexBasis: 140,
-                height: bone(64)
-              }, tile);
-            })
-          })]
-        })]
-      })
+          }, tile);
+        })
+      })]
     }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
-      ...knobProps.gap,
+      ...knobProps.gapLg,
+      paddingTop: knobProps.panelPadding.padding,
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.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__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
-            variant: "rounded",
             width: bone(width),
-            height: bone(44)
+            height: bone(40)
           }, tab);
         })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton.Text, {
-        lines: 4
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        ...knobProps.panelPadding,
+        paddingVertical: 0,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton.Text, {
+          lines: 4
+        })
       })]
     })]
   });

package/dist/cjs/record/RecordHero.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","RecordHero_exports","__export","RecordBreadcrumbBone","RecordHeroArtColumn","RecordHeroFrame","RecordHeroIdentityColumn","RecordHeroRow","RecordSkeleton","RecordVitals","recordHeroArtBasis","recordHeroArtMax","recordHeroIdentityBasis","module","exports","import_jsx_runtime","require","import_components","import_forms","import_theme","import_react_i18next","param","tint","children","rest","knobProps","useResolvedKnobs","jsx","YStack","borderRadius","panelPadding","backgroundColor","width","XStack","gapLg","flexWrap","alignItems","flexGrow","flexBasis","maxWidth","minWidth","gap","tiles","compact","length","map","tile","jsxs","borderWidth","Text","label","body","color","fontSize","fontWeight","percent","Progress","max","size","intent","progressProps","id","bone","bone2","px","sizeRecipeEscape","minHeight","Skeleton","height","testID","t","useTranslation","variant","aspectRatio"],"sources":["../../../src/record/RecordHero.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,kBAAA;AAAAC,QAAA,CAAAD,kBAAA;EAAAE,oBAAA,EAAAA,CAAA,KAAAA,oBAAA;EAAAC,mBAAA,EAAAA,CAAA,KAAAA,mBAAA;EAAAC,eAAA,EAAAA,CAAA,KAAAA,eAAA;EAAAC,wBAAA,EAAAA,CAAA,KAAAA,wBAAA;EAAAC,aAAA,EAAAA,CAAA,KAAAA,aAAA;EAAAC,cAAA,EAAAA,CAAA,KAAAA,cAAA;EAAAC,YAAA,EAAAA,CAAA,KAAAA,YAAA;EAAAC,kBAAA,EAAAA,CAAA,KAAAA,kBAAA;EAAAC,gBAAA,EAAAA,CAAA,KAAAA,gBAAA;EAAAC,uBAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAlB,YAAiE,CAAAK,kBAAA;AACjE,IAAAc,kBAAyB,GAAAC,OAAA;AACzB,IAAAC,iBAAmD,GAAAD,OAAA;AAEnD,IAAAE,YAAA,GAAAF,OAAA,CAA+B;AAmB3B,IAAAG,YAAA,GAAAH,OAAA;AAbG,IAAAI,oBAAM,GAAqBJ,OAAA;AAC3B,IAAAN,kBAAM,GAAmB;AACzB,IAAAC,gBAAM;AAQN,IAAAC,uBAA2B,MAAM;AACtC,SAAMP,eAAYA,CAAAgB,KAAI;EACtB;IAAAC,IACE;IAAAC,QAAA;IAAA,GAAAC;EAAA,IAAAH,KAAA;EAAA,IAAC;IAAAI;EAAA,QAAAN,YAAA,CAAAO,gBAAA;EAAA,0BAAAX,kBAAA,CAAAY,GAAA,EAAAV,iBAAA,CAAAW,MAAA;IAAA,GACEH,SAAG,CAAAI,YAAU;IAAA,GACbJ,SAAG,CAAAK,YAAU;IAAAC,eACd,EAAAT,IAAiB,OAAQA,IAAI,GAAI,YAAgB;IAAAU,KACjD,QAAM;IAAA,GACLR,IAAG;IAAAD;EAEH;AAAA;AAGP,SAAAhB,cAAAc,KAAA;EAEO;IAAAE;EAAS,IAAAF,KAAgB;EAC9B;IAAMI;EAAE,IAAU,IAAAN,YAAI,CAAAO,gBAAA;EACtB,OACE,mBAAAX,kBAAA,CAAAY,GAAA,EAACV,iBAAA,CAAAgB,MAAA;IAIL,GAAAR,SAAA,CAAAS,KAAA;IAEOC,QAAS;IACdC,UAAQ,cAAc;IACtBb;EACE,EAAC;AAAA;AAAA,SACCnB,mBAAUA,CAAAiB,KAAA;EAAA,IACV;IAAAE,QAAA;IAAW,GAAAC;EAAA,IAAAH,KAAA;EAAA,IACX;IAAAI;EAAU,QAAAN,YAAA,CAAAO,gBAAA;EAAA,OACV,eAAU,IAAAX,kBAAA,CAAAY,GAAA,EAAAV,iBAAA,CAAAW,MAAA;IAAAS,QACN;IAAUC,SACV,EAAA5B,kBAAA;IAAA6B,QAEH,EAAA5B,gBAAA;IAAA6B,QAAA;IACH,GAAAf,SAAA,CAAAgB,GAAA;IAEJ,GAAAjB,IAAA;IAEOD;EACL;AAAA;AAEF,SAA0CjB,yBAAAe,KAAA;EACxC;IAAME,QAAE;IAAA,GAAUC;EAAA,IAAIH,KAAA;EACtB;IAAAI;EACE,QAAAN,YAAA,CAAAO,gBAAA;EAAA,OAAC,mBAAAX,kBAAA,CAAAY,GAAA,EAAAV,iBAAA,CAAAW,MAAA;IAAAS,QAAA;IAAAC,SACC,EAAA1B,uBAAU;IAAA4B,QACV;IAAW,GACXf,SAAU,CAAAgB,GAAA;IAAA,GACTjB,IAAG;IAAUD;EACV;AAEH;AAAA,SACHd,aAAAY,KAAA;EAEJ;IAAAqB;EAAA,IAAArB,KAAA;EAWO;IAAAI;EAAS,IAAa,EAAE,EAAAN,YAAgD,CAAAO,gBAAA;IAC7EiB,OAAQ;EACR;EACA,IAAAD,KACE,CAAAE,MAAA;EAEI,OAAC,mBAAA7B,kBAAA,CAAAY,GAAA,EAAAV,iBAAA,CAAAgB,MAAA;IAAA,GAAAR,SAAA,CAAAgB,GAAA;IAAAN,QAEK,QAAU;IAAAZ,QACV,EAAAmB,KAAU,CAAAG,GAAA,WAAAC,IAAA;MACd,sBAAgB,IAAA/B,kBAAA,CAAAgC,IAAA,EAAA9B,iBAAA,CAAAW,MAAA;QAChB,GAAAH,SAAa,CAAAI,YAAA;QACb,GAAAJ,SAAU,CAAAK,YAAA;QACVC,eAAW;QACXiB,WAAI;QAEJX,QAAA;QAAAC,SAAA;QAGAG,GAAA;QAGClB,QAAK,GACH,mBAAAR,kBAAA,CAAAY,GAAA,EAAAV,iBAAA,CAAAgC,IAAA;UAAA,GAAAxB,SAAA,CAAAyB,KAAA;UACC,GAAAzB,SAAY,CAAA0B,IAAA;UACZC,KAAK;UACL7B,QAAK,EAAAuB,IAAA,CAAAI;QAAA,EACL,EAAO,eACP,CAAe,GAAEnC,kBAAmB,CAAAY,GAAA,EAAMV,iBAAA,CAAAgC,IAAA;UAAAI,QAAA;UAC5CC,UAAA;UAAA/B,QAAA,EAAAuB,IAAA,CAAA9C;QAAA,IAtBQ8C,IAAA,CAAAS,OAAA,wCAAAxC,kBAAA,CAAAY,GAAA,EAAAT,YAAA,CAAAsC,QAAA;UA0BhBxD,KAAA,EAAA8C,IAAA,CAAAS,OAAA;UAEJE,GAAA;UAEMC,IAAQ;UAIEC,MAAA;UAEZC,aAAA;YAIJ,cAAAd,IAAA,CAAAI;UAGgB;QACN,EAAE;MAEV,GACEJ,IAAA,CAAAe,EAAA;IAAC;EAAA;AAAA;AACe,IAAAC,IACd,YAAAC,MAAAC,EAAA;EAAA,OACA,IAAA7C,YAAA,CAAA8C,gBAAoB,EAAAD,EAAA;AAAA;AACX,SACT7D,oBAAcA,CAAA,EAAS;EAAA,OAEvB,mBAAAY,kBAAA,CAAAY,GAAA,EAAAV,iBAAA,CAAAgB,MAAA;IAAAG,UAAA;IAEI8B,SAAA,EAAAJ,IAAA;IAEAvC,QACA,qBAAAR,kBAAA,CAAAY,GAAC,EAAAV,iBAAA,CAAAkD,QAA0B,EAAG;MAC5BnC,KAAA,EAAA8B,IAAA;MAA6CM,MAC7C,EAAAN,IAAA;IAA8C;EACA;AAE5C;AAA+D,SAAAtD,cAC/DA,CAAAa,KAAA;EAA+D;IAAAgD;EACjE,IAAAhD,KAAA;EAAA;IAAAiD;EAAA,IACA,IAAAlD,oBAAA,CAAAmD,cAAA,GAAC;EAEG;IAAA9C;EAAC,QAAAN,YAAA,CAAAO,gBAAA;EAAA,0BAAAX,kBAAA,CAAAgC,IAAA,EAAA9B,iBAAA,CAAAW,MAAA;IAAA,GAAAH,SAEC,CAAAS,KAAA;IAAQmC,MAAA;IACE,qBACV,EAAW;IAAA,aACX;IAAe,cAAAC,CAAA;IAAA/C,QAAA,EAJV,gBAOX,IAAAR,kBAAA,CAAAY,GAAA,EAAAtB,eAAA;MAAAkB,QACF,qBAAAR,kBAAA,CAAAgC,IAAA,EAAAxC,aAAA;QAAAgB,QAEJ,GACA,mBAAAR,kBAAA,CAAAY,GAAC,EAAAvB,mBAAA;UACC;UAKAmB,QAAA,qBAAAR,kBAAC,CAAAY,GAAA,EAAAV,iBAAS,CAAAkD,QAAK,EAAO;YACxBK,OAAA;YAAAxC,KAAA;YAAAyC,WAAA;UACF;QAEJ,I","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","RecordHero_exports","__export","RecordHeroFrame","RecordHeroIdentityColumn","RecordSkeleton","RecordVitals","recordHeroArtHeight","recordHeroStageHeight","module","exports","import_jsx_runtime","require","import_components","import_theme","import_react_i18next","param","tints","children","rest","knobProps","useResolvedKnobs","first","second","jsxs","YStack","width","minHeight","sizeRecipeEscape","paddingTop","gap","backgroundColor","overflow","position","XStack","fullscreen","pointerEvents","jsx","flex","panelPadding","paddingBottom","minWidth","tiles","length","columnGap","gapLg","rowGap","flexWrap","map","tile","testID","id","Text","label","color","numberOfLines","TamaguiSizableText","size","heading","bone","bone2","px","t","useTranslation","alignItems","Skeleton","variant"],"sources":["../../../src/record/RecordHero.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}