@multiplatform.one/forms 6.6.0 → 7.0.0

package/dist/jsx/FieldDisplay/index.mjs

@@ -1,29 +1,188 @@
-import { CheckIcon, XIcon } from "@phosphor-icons/react";
-import { Text, View, XStack } from "tamagui";
+import { CheckIcon, FileIcon, ImageSquareIcon, StarIcon } from "@phosphor-icons/react";
+import { useReadableTextOn, useResolvedKnobs } from "@multiplatform.one/theme";
+import { getSize } from "@tamagui/get-token";
+import { useState } from "react";
+import { Image, Text, View, XStack, getVariableValue, useTheme } from "tamagui";
+import { Chip } from "../Chip/index.mjs";
 import { BarcodePreview } from "../fields/Barcode/BarcodePreview.mjs";
+import { formControlColors, formSelectedColors } from "../shared/colorRamps.mjs";
+import { useIsInTableCell } from "../shared/tableCellContext.mjs";
 import { t } from "../shared/t.mjs";
 import { asText, EMPTY, formatDateText, formatNumericText } from "./formatters.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-function TextCell({
+const CHIP_COLORS = /* @__PURE__ */new Set(["gray", "red", "green", "blue", "yellow", "orange", "purple"]);
+const INTENT_CHIP = {
+  success: "green",
+  error: "red",
+  warning: "yellow",
+  accent: "blue",
+  info: "blue"
+};
+function chipSizeFor(size) {
+  if (size === "small") return "$2";
+  if (size === "large") return "$4";
+  return "$3";
+}
+function framePadding(space) {
+  const map = {
+    small: {
+      paddingHorizontal: "$1.5",
+      paddingVertical: "$2"
+    },
+    medium: {
+      paddingHorizontal: "$2",
+      paddingVertical: "$3"
+    },
+    large: {
+      paddingHorizontal: "$3",
+      paddingVertical: "$4"
+    }
+  };
+  return map[space] ?? map.medium;
+}
+function resolveChipColor(value, fieldProps, opt) {
+  const raw = opt?.color ?? opt?.intent ?? fieldProps?.colors?.[value] ?? fieldProps?.intents?.[value];
+  if (typeof raw === "string") {
+    if (CHIP_COLORS.has(raw)) return raw;
+    if (INTENT_CHIP[raw]) return INTENT_CHIP[raw];
+  }
+  return "gray";
+}
+function isSafeHttpUrl(value) {
+  if (typeof value !== "string") return false;
+  try {
+    const parsed = new URL(value);
+    return parsed.protocol === "http:" || parsed.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+function useDisplayChrome() {
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  const inTableCell = useIsInTableCell();
+  const glyphSize = Math.max(12, Math.round(getVariableValue(getSize(knobProps.sizeToken)) * 0.45));
+  return {
+    knobProps,
+    inTableCell,
+    glyphSize
+  };
+}
+function DisplayFrame({
+  field,
+  children
+}) {
+  const {
+    knobProps,
+    inTableCell
+  } = useDisplayChrome();
+  if (inTableCell) {
+    return /* @__PURE__ */jsx(XStack, {
+      "data-component": "FieldDisplay",
+      "data-field": field,
+      alignItems: "center",
+      minWidth: 0,
+      flex: 1,
+      children
+    });
+  }
+  return /* @__PURE__ */jsx(XStack, {
+    "data-component": "FieldDisplay",
+    "data-field": field,
+    alignItems: "center",
+    minWidth: 0,
+    width: "100%",
+    ...knobProps.surface,
+    ...knobProps.borderRadius,
+    ...(knobProps.outlined ? {
+      backgroundColor: "transparent"
+    } : void 0),
+    ...framePadding(knobProps.space),
+    children
+  });
+}
+function ValueText({
   children,
   mono = false,
-  align = "left"
+  align = "left",
+  lines = 1,
+  wrap = false,
+  empty = false
 }) {
+  const {
+    knobProps
+  } = useResolvedKnobs();
   return /* @__PURE__ */jsx(Text, {
-    numberOfLines: 1,
-    fontSize: "$4",
-    lineHeight: "$4",
-    fontFamily: mono ? "$mono" : "$body",
+    ...(wrap ? void 0 : {
+      numberOfLines: lines
+    }),
+    ...knobProps.body,
+    ...knobProps.label,
+    fontFamily: mono ? "$mono" : knobProps.body.fontFamily,
     textAlign: align,
-    color: "$color",
+    color: empty ? "$color10" : knobProps.textAccentColor,
+    userSelect: "text",
+    flexShrink: 1,
+    minWidth: 0,
+    width: wrap ? "100%" : void 0,
+    display: wrap ? "block" : void 0,
+    whiteSpace: wrap ? "pre-wrap" : void 0,
+    children
+  });
+}
+function TextCell({
+  children,
+  mono = false,
+  align = "left",
+  lines = 1,
+  wrap = false
+}) {
+  const empty = children === EMPTY;
+  return /* @__PURE__ */jsx(ValueText, {
+    mono,
+    align,
+    lines,
+    wrap,
+    empty,
     children
   });
 }
 function InputDisplay({
-  value
+  value,
+  href,
+  multiline,
+  mono
 }) {
+  const {
+    knobProps,
+    inTableCell
+  } = useDisplayChrome();
+  const text = asText(value);
+  const link = href || (isSafeHttpUrl(value) ? value : void 0);
+  if (link && text !== EMPTY) {
+    return /* @__PURE__ */jsx(Text, {
+      numberOfLines: 1,
+      ...knobProps.body,
+      ...knobProps.label,
+      color: "$accentColor",
+      textDecorationLine: "underline",
+      ...{
+        tag: "a",
+        href: link
+      },
+      role: "link",
+      cursor: "pointer",
+      userSelect: "text",
+      flexShrink: 1,
+      minWidth: 0,
+      children: text
+    });
+  }
   return /* @__PURE__ */jsx(TextCell, {
-    children: asText(value)
+    mono,
+    wrap: Boolean(multiline && !inTableCell),
+    children: text
   });
 }
 function NumericDisplay({
@@ -86,71 +245,84 @@ function ChoiceDisplay({
   value,
   fieldProps
 }) {
+  const {
+    knobProps
+  } = useDisplayChrome();
   if (value == null || value === "") return /* @__PURE__ */jsx(TextCell, {
     children: EMPTY
   });
   const options = fieldProps?.options ?? [];
-  if (Array.isArray(value)) {
-    const labels = value.map(v => {
-      const opt2 = options.find(o => o.value === v || String(o.value) === String(v));
-      return opt2?.label ?? asText(v);
-    });
-    return /* @__PURE__ */jsx(TextCell, {
-      children: labels.join(", ")
-    });
-  }
-  const opt = options.find(o => o.value === value || String(o.value) === String(value));
-  return /* @__PURE__ */jsx(TextCell, {
-    children: opt?.label ?? asText(value)
+  const size = chipSizeFor(knobProps.size);
+  const values = Array.isArray(value) ? value : [value];
+  return /* @__PURE__ */jsx(XStack, {
+    alignItems: "center",
+    flexWrap: "wrap",
+    minWidth: 0,
+    ...knobProps.gap,
+    children: values.map((item, index) => {
+      const opt = options.find(o => o.value === item || String(o.value) === String(item));
+      return /* @__PURE__ */jsx(Chip, {
+        size,
+        color: resolveChipColor(item, fieldProps, opt),
+        children: opt?.label ?? asText(item)
+      }, `${String(item)}-${index}`);
+    })
   });
 }
 function BooleanDisplay({
   value
 }) {
+  const {
+    knobProps,
+    glyphSize
+  } = useDisplayChrome();
+  const onMark = useReadableTextOn(formSelectedColors.mark);
   if (value == null) return /* @__PURE__ */jsx(TextCell, {
     align: "center",
     children: EMPTY
   });
-  return /* @__PURE__ */jsx(XStack, {
-    justifyContent: "center",
+  const marked = Boolean(value);
+  return /* @__PURE__ */jsx(View, {
+    width: glyphSize,
+    height: glyphSize,
+    ...knobProps.inputSurface,
+    ...knobProps.borderRadius,
+    backgroundColor: marked ? formSelectedColors.mark : knobProps.outlined ? "transparent" : formControlColors.background,
+    borderColor: marked ? formSelectedColors.mark : formControlColors.border,
     alignItems: "center",
-    width: "100%",
-    children: value ? /* @__PURE__ */jsx(CheckIcon, {
-      size: 14,
-      weight: "bold"
-    }) :
-    // Distinct glyph for a real `false` — the EMPTY dash is reserved for
-    // null/undefined (no data).
-    /* @__PURE__ */
-    jsx(XIcon, {
-      size: 14,
+    justifyContent: "center",
+    "aria-hidden": true,
+    children: marked ? /* @__PURE__ */jsx(CheckIcon, {
+      size: Math.round(glyphSize * 0.65),
       weight: "bold",
-      opacity: 0.45
-    })
+      color: onMark ?? knobProps.textAccentColor
+    }) : null
   });
 }
 function ColorDisplay({
   value
 }) {
+  const {
+    knobProps,
+    glyphSize
+  } = useDisplayChrome();
   const hex = typeof value === "string" && value ? value : null;
   if (!hex) return /* @__PURE__ */jsx(TextCell, {
     children: EMPTY
   });
   return /* @__PURE__ */jsxs(XStack, {
     alignItems: "center",
-    gap: "$2",
+    minWidth: 0,
+    ...knobProps.gap,
     children: [/* @__PURE__ */jsx(View, {
-      width: 14,
-      height: 14,
-      borderRadius: "$2",
-      borderWidth: 1,
+      width: glyphSize,
+      height: glyphSize,
+      ...knobProps.inputSurface,
+      ...knobProps.borderRadius,
       borderColor: "$borderColor",
       backgroundColor: hex
-    }), /* @__PURE__ */jsx(Text, {
-      fontFamily: "$mono",
-      fontSize: "$4",
-      lineHeight: "$4",
-      color: "$color",
+    }), /* @__PURE__ */jsx(ValueText, {
+      mono: true,
       children: hex.toUpperCase()
     })]
   });
@@ -186,6 +358,10 @@ function DurationDisplay({
 function FileUploadDisplay({
   value
 }) {
+  const {
+    knobProps,
+    glyphSize
+  } = useDisplayChrome();
   const files = Array.isArray(value) ? value : value ? [value] : [];
   if (!files.length) return /* @__PURE__ */jsx(TextCell, {
     children: EMPTY
@@ -193,57 +369,94 @@ function FileUploadDisplay({
   const label = files.length === 1 ? typeof files[0] === "string" ? files[0] : files[0]?.name ?? t("1 file") : t("{{count}} files", {
     count: files.length
   });
-  return /* @__PURE__ */jsx(TextCell, {
-    children: label
+  return /* @__PURE__ */jsxs(XStack, {
+    alignItems: "center",
+    minWidth: 0,
+    ...knobProps.gap,
+    children: [/* @__PURE__ */jsx(FileIcon, {
+      size: glyphSize
+    }), /* @__PURE__ */jsx(TextCell, {
+      children: label
+    })]
+  });
+}
+function Thumb({
+  src,
+  alt,
+  knobProps
+}) {
+  const [broken, setBroken] = useState(false);
+  const {
+    px
+  } = knobProps.nestedControl;
+  if (broken) {
+    return /* @__PURE__ */jsx(View, {
+      width: px,
+      height: px,
+      ...knobProps.borderRadius,
+      backgroundColor: "$color3",
+      alignItems: "center",
+      justifyContent: "center",
+      overflow: "hidden",
+      children: /* @__PURE__ */jsx(ImageSquareIcon, {
+        size: Math.round(px * 0.45)
+      })
+    });
+  }
+  return /* @__PURE__ */jsx(View, {
+    width: px,
+    height: px,
+    ...knobProps.borderRadius,
+    overflow: "hidden",
+    backgroundColor: "$color3",
+    children: /* @__PURE__ */jsx(Image, {
+      src,
+      alt,
+      width: px,
+      height: px,
+      objectFit: "cover",
+      onError: () => setBroken(true)
+    })
   });
 }
 function ImageDisplay({
   value
 }) {
+  const {
+    knobProps
+  } = useDisplayChrome();
   const src = typeof value === "string" && value ? value : null;
   if (!src) return /* @__PURE__ */jsx(TextCell, {
     children: EMPTY
   });
-  return /* @__PURE__ */jsx(View, {
-    width: 28,
-    height: 28,
-    borderRadius: "$2",
-    borderWidth: 1,
-    borderColor: "$borderColor",
-    overflow: "hidden",
-    backgroundColor: "$color3",
-    children: /* @__PURE__ */jsx(View, {
-      width: "100%",
-      height: "100%",
-      backgroundImage: `url(${src})`,
-      backgroundSize: "cover",
-      backgroundPosition: "center"
-    })
+  return /* @__PURE__ */jsx(Thumb, {
+    src,
+    alt: "",
+    knobProps
   });
 }
 function BarcodeDisplay({
   value
 }) {
+  const {
+    knobProps,
+    glyphSize
+  } = useDisplayChrome();
   const text = String(value ?? "");
   if (!text) return /* @__PURE__ */jsx(TextCell, {
     children: EMPTY
   });
   return /* @__PURE__ */jsxs(XStack, {
     alignItems: "center",
-    gap: "$2",
     minWidth: 0,
     flexShrink: 1,
-    children: [/* @__PURE__ */jsx(Text, {
-      fontFamily: "$mono",
-      fontSize: "$4",
-      lineHeight: "$4",
-      color: "$color",
-      numberOfLines: 1,
-      flexShrink: 1,
+    ...knobProps.gap,
+    children: [/* @__PURE__ */jsx(ValueText, {
+      mono: true,
       children: text
     }), /* @__PURE__ */jsx(BarcodePreview, {
       value: text,
-      height: 16,
+      height: Math.max(12, glyphSize),
       moduleWidth: 1
     })]
   });
@@ -251,6 +464,15 @@ function BarcodeDisplay({
 function SignatureDisplay({
   value
 }) {
+  const {
+    knobProps
+  } = useDisplayChrome();
+  const src = typeof value === "string" && value.startsWith("data:image") ? value : null;
+  if (src) return /* @__PURE__ */jsx(Thumb, {
+    src,
+    alt: t("signed"),
+    knobProps
+  });
   const hasInk = typeof value === "string" && value.length > 0 || Array.isArray(value) && value.length > 0;
   return /* @__PURE__ */jsx(TextCell, {
     children: hasInk ? t("signed") : EMPTY
@@ -290,100 +512,224 @@ function RichTextDisplay({
     children: text
   });
 }
+function MeterDisplay({
+  value,
+  fieldProps
+}) {
+  const {
+    knobProps,
+    glyphSize
+  } = useDisplayChrome();
+  if (value == null || value === "") return /* @__PURE__ */jsx(TextCell, {
+    children: EMPTY
+  });
+  const num = typeof value === "number" ? value : Number(value);
+  if (Number.isNaN(num)) return /* @__PURE__ */jsx(TextCell, {
+    children: asText(value)
+  });
+  const max = typeof fieldProps?.max === "number" ? fieldProps.max : num <= 1 ? 1 : 100;
+  const ratio = Math.min(1, Math.max(0, max === 0 ? 0 : num / max));
+  const trackHeight = Math.max(4, Math.round(glyphSize / 4));
+  return /* @__PURE__ */jsxs(XStack, {
+    alignItems: "center",
+    minWidth: 0,
+    flex: 1,
+    ...knobProps.gap,
+    children: [/* @__PURE__ */jsx(View, {
+      flex: 1,
+      minWidth: 48,
+      maxWidth: 160,
+      height: trackHeight,
+      overflow: "hidden",
+      backgroundColor: knobProps.outlined ? "transparent" : formControlColors.background,
+      ...knobProps.inputSurface,
+      ...knobProps.borderRadius,
+      children: /* @__PURE__ */jsx(View, {
+        width: `${Math.round(ratio * 100)}%`,
+        height: "100%",
+        backgroundColor: formSelectedColors.mark
+      })
+    }), /* @__PURE__ */jsx(TextCell, {
+      mono: true,
+      children: formatNumericText(num, {
+        precision: fieldProps?.precision
+      })
+    })]
+  });
+}
+function RatingDisplay({
+  value,
+  fieldProps
+}) {
+  const {
+    knobProps,
+    glyphSize
+  } = useDisplayChrome();
+  const theme = useTheme();
+  if (value == null || value === "") return /* @__PURE__ */jsx(TextCell, {
+    children: EMPTY
+  });
+  const num = typeof value === "number" ? value : Number(value);
+  if (Number.isNaN(num)) return /* @__PURE__ */jsx(TextCell, {
+    children: asText(value)
+  });
+  const maxStars = typeof fieldProps?.maxStars === "number" ? fieldProps.maxStars : 5;
+  const filled = num > 1 ? Math.round(Math.min(maxStars, num)) : Math.round(num * maxStars);
+  const filledColor = theme.accentBackground?.val ?? theme.color10?.val;
+  const emptyColor = theme.color8?.val;
+  return /* @__PURE__ */jsx(XStack, {
+    alignItems: "center",
+    ...knobProps.gap,
+    "aria-label": t("{{star}} of {{max}} stars", {
+      star: filled,
+      max: maxStars
+    }),
+    children: Array.from({
+      length: maxStars
+    }, (_, i) => /* @__PURE__ */jsx(StarIcon, {
+      size: glyphSize,
+      weight: i < filled ? "fill" : "regular",
+      color: i < filled ? filledColor : emptyColor
+    }, i))
+  });
+}
 function FieldDisplay({
   field = "input",
   value,
   fieldProps,
   linkedValue
 }) {
+  let body;
   switch (field) {
     case "input":
-    case "textarea":
     case "mentioninput":
     case "phoneinput":
+      body = /* @__PURE__ */jsx(InputDisplay, {
+        value,
+        href: fieldProps?.href
+      });
+      break;
     case "otp":
-      return /* @__PURE__ */jsx(InputDisplay, {
-        value
+      body = /* @__PURE__ */jsx(InputDisplay, {
+        value,
+        mono: true
+      });
+      break;
+    case "textarea":
+      body = /* @__PURE__ */jsx(InputDisplay, {
+        value,
+        multiline: true
       });
+      break;
     case "barcode":
-      return /* @__PURE__ */jsx(BarcodeDisplay, {
+      body = /* @__PURE__ */jsx(BarcodeDisplay, {
         value
       });
+      break;
     case "stepper":
+      body = /* @__PURE__ */jsx(NumericDisplay, {
+        value,
+        fieldProps
+      });
+      break;
     case "slider":
-    case "rating":
     case "progress":
-      return /* @__PURE__ */jsx(NumericDisplay, {
+      body = /* @__PURE__ */jsx(MeterDisplay, {
         value,
         fieldProps
       });
+      break;
+    case "rating":
+      body = /* @__PURE__ */jsx(RatingDisplay, {
+        value,
+        fieldProps
+      });
+      break;
     case "select":
     case "combobox":
     case "radiogroup":
     case "togglegroup":
-      return /* @__PURE__ */jsx(ChoiceDisplay, {
+      body = /* @__PURE__ */jsx(ChoiceDisplay, {
         value,
         fieldProps
       });
+      break;
     case "checkbox":
     case "switch":
-      return /* @__PURE__ */jsx(BooleanDisplay, {
+      body = /* @__PURE__ */jsx(BooleanDisplay, {
         value
       });
+      break;
     case "datepicker":
     case "multidatepicker":
-      return /* @__PURE__ */jsx(DateDisplay, {
+      body = /* @__PURE__ */jsx(DateDisplay, {
         value,
         fieldProps
       });
+      break;
     case "datetimepicker":
     case "timepicker":
-      return /* @__PURE__ */jsx(DateDisplay, {
+      body = /* @__PURE__ */jsx(DateDisplay, {
         value,
         fieldProps,
         withTime: true
       });
+      break;
     case "daterangepicker":
-      return /* @__PURE__ */jsx(DateRangeDisplay, {
+      body = /* @__PURE__ */jsx(DateRangeDisplay, {
         value,
         linkedValue
       });
+      break;
     case "colorpicker":
-      return /* @__PURE__ */jsx(ColorDisplay, {
+      body = /* @__PURE__ */jsx(ColorDisplay, {
         value
       });
+      break;
     case "duration":
-      return /* @__PURE__ */jsx(DurationDisplay, {
+      body = /* @__PURE__ */jsx(DurationDisplay, {
         value
       });
+      break;
     case "fileupload":
-      return /* @__PURE__ */jsx(FileUploadDisplay, {
+      body = /* @__PURE__ */jsx(FileUploadDisplay, {
         value
       });
+      break;
     case "image":
-      return /* @__PURE__ */jsx(ImageDisplay, {
+      body = /* @__PURE__ */jsx(ImageDisplay, {
         value
       });
+      break;
     case "signature":
-      return /* @__PURE__ */jsx(SignatureDisplay, {
+      body = /* @__PURE__ */jsx(SignatureDisplay, {
         value
       });
+      break;
     case "geolocation":
-      return /* @__PURE__ */jsx(GeolocationDisplay, {
+      body = /* @__PURE__ */jsx(GeolocationDisplay, {
         value
       });
+      break;
     case "richtexteditor":
     case "markdowneditor":
     case "codeeditor":
-      return /* @__PURE__ */jsx(RichTextDisplay, {
+      body = /* @__PURE__ */jsx(RichTextDisplay, {
         value
       });
+      break;
     case "custom":
     default:
-      return /* @__PURE__ */jsx(InputDisplay, {
-        value
+      body = /* @__PURE__ */jsx(InputDisplay, {
+        value,
+        href: fieldProps?.href
       });
+      break;
   }
+  return /* @__PURE__ */jsx(DisplayFrame, {
+    field,
+    children: body
+  });
 }
 export { FieldDisplay };
 //# sourceMappingURL=index.mjs.map