@multiplatform.one/frappe-ui 7.4.1 → 7.6.0

package/dist/esm/fields/Password/index.native.js

@@ -1,7 +1,35 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Input as FormsInput } from "@multiplatform.one/forms";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EyeIcon, EyeSlashIcon } from "@phosphor-icons/react";
+import { Field, FieldLayout, Input as FormsInput, Skeleton, getFieldError, mergeFieldHandler, useFormField, useResolvedValidators } from "@multiplatform.one/forms";
+import { MIN_PRESS_TARGET, isTouchSurface, pressTargetHitSlop, sizeRecipeForToken } from "@multiplatform.one/theme";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { useProps } from "tamagui";
+var SHOW_PASSWORD = "Show password";
+var HIDE_PASSWORD = "Hide password";
+function nativeInput(node, id) {
+  var fromRef = node;
+  if (fromRef && typeof fromRef.setSelectionRange === "function") {
+    return fromRef;
+  }
+  if (typeof document === "undefined" || !id) return null;
+  return document.getElementById(id);
+}
+function readSelection(node, id) {
+  var _el_selectionEnd;
+  var el = nativeInput(node, id);
+  if (!el || typeof el.selectionStart !== "number") return null;
+  return {
+    start: el.selectionStart,
+    end: (_el_selectionEnd = el.selectionEnd) !== null && _el_selectionEnd !== void 0 ? _el_selectionEnd : el.selectionStart
+  };
+}
+function restoreSelection(node, sel, id) {
+  var el = nativeInput(node, id);
+  el === null || el === void 0 ? void 0 : el.focus();
+  if (sel) el === null || el === void 0 ? void 0 : el.setSelectionRange(sel.start, sel.end);
+}
 function Password(props) {
+  var _ref;
   var {
     defaultValue,
     form,
@@ -15,30 +43,172 @@ function Password(props) {
     validators,
     disabled,
     value,
+    size: sizeFromProps,
     ...fieldProps
   } = useProps(props);
-  return /* @__PURE__ */_jsx(FormsInput, {
-    name,
+  var {
+    resolvedForm,
+    knobProps,
+    id
+  } = useFormField({
     form,
-    validators,
-    defaultValue,
+    id: fieldProps.id,
+    compact: fieldProps.compact
+  });
+  var resolvedValidators = useResolvedValidators(fieldProps.required, validators, fieldProps.label, name);
+  var resolvedSize = (_ref = sizeFromProps !== null && sizeFromProps !== void 0 ? sizeFromProps : fieldProps.size) !== null && _ref !== void 0 ? _ref : knobProps.sizeToken;
+  var visualHeight = sizeRecipeForToken(String(resolvedSize), {
+    touch: isTouchSurface()
+  }).height;
+  var belowFloor = visualHeight < MIN_PRESS_TARGET;
+  var isControlled = value !== void 0;
+  var [internalText, setInternalText] = useState(String(defaultValue !== null && defaultValue !== void 0 ? defaultValue : ""));
+  var text = isControlled ? String(value !== null && value !== void 0 ? value : "") : internalText;
+  var [revealed, setRevealed] = useState(false);
+  var inputRef = useRef(null);
+  var pendingSelection = useRef(null);
+  useEffect(function () {
+    if (!text) setRevealed(false);
+  }, [text]);
+  useLayoutEffect(function () {
+    if (!pendingSelection.current) return;
+    restoreSelection(inputRef.current, pendingSelection.current, id);
+    pendingSelection.current = null;
+  }, [id, revealed]);
+  var handleChangeText = useCallback(function (next) {
+    if (disabled) return;
+    if (!isControlled) setInternalText(next);
+    onChange === null || onChange === void 0 ? void 0 : onChange(next);
+  }, [disabled, isControlled, onChange]);
+  var toggleReveal = useCallback(function () {
+    pendingSelection.current = readSelection(inputRef.current, id);
+    setRevealed(function (open) {
+      return !open;
+    });
+  }, [id]);
+  var boxContract = {
+    size: resolvedSize,
+    "data-density": knobProps.density,
+    "data-size": String(resolvedSize),
+    "data-visual-height": String(visualHeight),
+    "data-press-floor": belowFloor ? "slop" : "box",
+    "data-ring-target": "box",
+    ...(belowFloor ? {
+      hitSlop: pressTargetHitSlop(visualHeight)
+    } : void 0)
+  };
+  var layoutBind = {
+    id,
     label: fieldProps.label,
     labelProps: fieldProps.labelProps,
-    error: fieldProps.error,
     helperText: fieldProps.helperText,
-    readOnly: fieldProps.readOnly,
-    skeleton: fieldProps.skeleton,
-    compact: fieldProps.compact,
     required: fieldProps.required,
-    id: fieldProps.id,
-    size: fieldProps.size,
-    value,
-    onChangeText: onChange,
-    onBlur,
-    placeholder,
     disabled,
-    secureTextEntry: true,
-    inputProps
+    size: resolvedSize,
+    knobProps,
+    placeholder
+  };
+  var {
+    type: _omitInputType,
+    ...areaInputProps
+  } = inputProps !== null && inputProps !== void 0 ? inputProps : {};
+  var renderBox = function renderBox2(inputValue, handleChange, hasError) {
+    return /* @__PURE__ */_jsxs(FormsInput.Box, {
+      ...boxContract,
+      disabled,
+      ...(hasError ? {
+        theme: "red"
+      } : void 0),
+      children: [/* @__PURE__ */_jsx(FormsInput.Area, {
+        ref: inputRef,
+        ...areaInputProps,
+        id,
+        value: inputValue !== null && inputValue !== void 0 ? inputValue : "",
+        disabled,
+        readOnly: fieldProps.readOnly,
+        placeholder,
+        type: revealed ? "text" : "password",
+        secureTextEntry: !revealed,
+        textContentType: "password",
+        autoComplete: "current-password",
+        spellCheck: false,
+        "aria-required": fieldProps.required || void 0,
+        "aria-invalid": hasError || void 0,
+        "aria-readonly": fieldProps.readOnly || void 0,
+        onChangeText: function onChangeText(next) {
+          handleChange === null || handleChange === void 0 ? void 0 : handleChange(next);
+          handleChangeText(next);
+        }
+      }), /* @__PURE__ */_jsx(FormsInput.Button, {
+        glyphRing: true,
+        size: resolvedSize,
+        disabled,
+        "aria-label": revealed ? HIDE_PASSWORD : SHOW_PASSWORD,
+        "aria-pressed": revealed,
+        "aria-controls": id,
+        hitSlop: belowFloor ? pressTargetHitSlop(visualHeight) : void 0,
+        onPress: disabled || fieldProps.readOnly ? void 0 : toggleReveal,
+        onKeyDown: function onKeyDown(e) {
+          if (disabled || fieldProps.readOnly) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            e.stopPropagation();
+            toggleReveal();
+          }
+        },
+        children: /* @__PURE__ */_jsx(FormsInput.Icon, {
+          "aria-hidden": true,
+          children: revealed ? /* @__PURE__ */_jsx(EyeSlashIcon, {}) : /* @__PURE__ */_jsx(EyeIcon, {})
+        })
+      })]
+    });
+  };
+  if (fieldProps.skeleton) {
+    return /* @__PURE__ */_jsx(FieldLayout, {
+      ...layoutBind,
+      error: fieldProps.error,
+      children: /* @__PURE__ */_jsx(FormsInput, {
+        size: resolvedSize,
+        children: /* @__PURE__ */_jsx(Skeleton, {
+          variant: "rounded",
+          width: "100%",
+          height: visualHeight
+        })
+      })
+    });
+  }
+  if (!resolvedForm || !name) {
+    return /* @__PURE__ */_jsx(FieldLayout, {
+      ...layoutBind,
+      error: fieldProps.error,
+      onBlur,
+      children: /* @__PURE__ */_jsx(FormsInput, {
+        size: resolvedSize,
+        error: fieldProps.error,
+        children: renderBox(text, void 0, !!fieldProps.error)
+      })
+    });
+  }
+  return /* @__PURE__ */_jsx(Field, {
+    form: resolvedForm,
+    name,
+    defaultValue,
+    validators: resolvedValidators,
+    children: function children(field) {
+      var resolvedError = getFieldError(field, fieldProps.error);
+      return /* @__PURE__ */_jsx(FieldLayout, {
+        ...layoutBind,
+        error: resolvedError,
+        onBlur: mergeFieldHandler(field, "handleBlur", onBlur),
+        children: /* @__PURE__ */_jsx(FormsInput, {
+          size: resolvedSize,
+          error: resolvedError,
+          children: renderBox(field.state.value, function (next) {
+            return field.handleChange(next);
+          }, !!resolvedError)
+        })
+      });
+    }
   });
 }
 export { Password };

package/dist/esm/fields/Password/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","Input","FormsInput","useProps","Password","props","defaultValue","form","inputProps","_mode","name","onBlur","onChange","placeholder","_preserveValue","validators","disabled","value","fieldProps","label","labelProps","error","helperText","readOnly","skeleton","compact","required","id","size","onChangeText","secureTextEntry"],"sources":["../../../../src/fields/Password/index.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,GAAA,IAAAC,IAAS,2BAAkB;AAEpC,SAASC,KAAA,IAAAC,UAAgB;AA0DrB,SAAAC,QAAA;AArBG,SAASC,SAGdC,KAAA,EAAoC;EACpC;IAAMC,YAAA;IAAAC,IAAA;IAAAC,UAAA;IAAAC,KAAA;IAAAC,IAAA;IAAAC,MAAA;IAAAC,QAAA;IAAAC,WAAA;IAAAC,cAAA;IAAAC,UAAA;IAAAC,QAAA;IAAAC,KAAA;IAAA,GAAAC;EAAA,IAAAf,QAAA,CAAAE,KAAA;EAAA,OACJ,eAAAL,IAAA,CAAAE,UAAA;IACAQ,IAAA;IACAH,IAAA;IACAQ,UAAA;IACAT,YAAA;IACAa,KAAA,EAAAD,UAAA,CAAAC,KAAA;IACAC,UAAA,EAAAF,UAAA,CAAAE,UAAA;IACAC,KAAA,EAAAH,UAAA,CAAAG,KAAA;IACAC,UAAA,EAAAJ,UAAA,CAAAI,UAAA;IACAC,QAAA,EAAAL,UAAA,CAAAK,QAAA;IACAC,QAAA,EAAAN,UAAA,CAAAM,QAAA;IACAC,OAAA,EAAAP,UAAA,CAAAO,OAAA;IACAC,QAAG,EAAAR,UAAA,CAAAQ,QAAA;IACLC,EAAI,EAAAT,UAAS,CAAAS,EAAK;IAElBC,IAAA,EACEV,UAAA,CAAAU,IAAA;IAACX,KAAA;IAAAY,YAAA,EAAAjB,QAAA;IAAAD,MACC;IAAAE,WACA;IAAAG,QACA;IAAAc,eACA;IAAAtB;EACkB;AACK;AACL,SACKJ,QACvB","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","EyeIcon","EyeSlashIcon","Field","FieldLayout","Input","FormsInput","Skeleton","getFieldError","mergeFieldHandler","useFormField","useResolvedValidators","MIN_PRESS_TARGET","isTouchSurface","pressTargetHitSlop","sizeRecipeForToken","useCallback","useEffect","useLayoutEffect","useRef","useState","useProps","SHOW_PASSWORD","HIDE_PASSWORD","nativeInput","node","id","fromRef","setSelectionRange","document","getElementById","readSelection","_el_selectionEnd","el","selectionStart","start","end","selectionEnd","restoreSelection","sel","focus","Password","props","_ref","defaultValue","form","inputProps","_mode","name","onBlur","onChange","placeholder","_preserveValue","validators","disabled","value","size","sizeFromProps","fieldProps","resolvedForm","knobProps","compact","resolvedValidators","required","label","resolvedSize","sizeToken","visualHeight","String","touch","height","belowFloor","isControlled","internalText","setInternalText","text","revealed","setRevealed","inputRef","pendingSelection","current","handleChangeText","next","toggleReveal","open","boxContract","density","hitSlop","layoutBind","labelProps","helperText","type","_omitInputType","areaInputProps","renderBox","renderBox2","inputValue","handleChange","hasError","Box","theme","children","Area","ref","readOnly","secureTextEntry","textContentType","autoComplete","spellCheck","onChangeText","Button","glyphRing","onPress","onKeyDown","e","key","preventDefault","stopPropagation","Icon","skeleton","error","variant","width","field","resolvedError","state"],"sources":["../../../../src/fields/Password/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/fields/Phone/index.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["PhoneInput","useProps","jsx","Phone","props","defaultValue","form","_mode","name","onChange","placeholder","_preserveValue","validators","disabled","value","defaultCountry","fieldProps","phoneProps","label","labelProps","error","helperText","readOnly","skeleton","compact","required","id","size"],"sources":["../../../../src/fields/Phone/index.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,UAAA,QAAkB;AAE3B,SAASC,QAAA,QAAgB;AA8EhB,SAAAC,GAAA;AAzCF,SAASC,MAGdC,KAAA,EAAsC;EACtC,MAAM;IACJC,YAAA;IACAC,IAAA;IACAC,KAAA;IACAC,IAAA;IACAC,QAAA;IACAC,WAAA;IACAC,cAAA;IACAC,UAAA;IACAC,QAAA;IACAC,KAAA;IACAC,cAAA;IACA,GAAGC;EACL,IAAIf,QAAA,CAASG,KAAK;EAElB,MAAMa,UAAA,GAAkB;IACtBT,IAAA;IACAF,IAAA;IACAM,UAAA;IACAP,YAAA;IACAa,KAAA,EAAOF,UAAA,CAAWE,KAAA;IAClBC,UAAA,EAAYH,UAAA,CAAWG,UAAA;IACvBC,KAAA,EAAOJ,UAAA,CAAWI,KAAA;IAClBC,UAAA,EAAYL,UAAA,CAAWK,UAAA;IACvBC,QAAA,EAAUN,UAAA,CAAWM,QAAA;IACrBC,QAAA,EAAUP,UAAA,CAAWO,QAAA;IACrBC,OAAA,EAASR,UAAA,CAAWQ,OAAA;IACpBC,QAAA,EAAUT,UAAA,CAAWS,QAAA;IACrBC,EAAA,EAAIV,UAAA,CAAWU,EAAA;IACfC,IAAA,EAAMX,UAAA,CAAWW,IAAA;IACjBb,KAAA;IACAL,QAAA;IACAC,WAAA;IACAG,QAAA;IACAE;EACF;EAEA,OAAO,eAAAb,GAAA,CAACF,UAAA;IAAY,GAAGiB;EAAA,CAAY;AACrC","ignoreList":[]}
+{"version":3,"names":["PhoneInput","useProps","jsx","Phone","props","defaultValue","form","_mode","name","onChange","placeholder","_preserveValue","validators","disabled","value","defaultCountry","fieldProps","phoneProps","label","labelProps","error","helperText","readOnly","skeleton","compact","required","id","size"],"sources":["../../../../src/fields/Phone/index.tsx"],"sourcesContent":[null],"mappings":"AAKA,SAASA,UAAA,QAAkB;AAE3B,SAASC,QAAA,QAAgB;AA8EhB,SAAAC,GAAA;AAzCF,SAASC,MAGdC,KAAA,EAAsC;EACtC,MAAM;IACJC,YAAA;IACAC,IAAA;IACAC,KAAA;IACAC,IAAA;IACAC,QAAA;IACAC,WAAA;IACAC,cAAA;IACAC,UAAA;IACAC,QAAA;IACAC,KAAA;IACAC,cAAA;IACA,GAAGC;EACL,IAAIf,QAAA,CAASG,KAAK;EAElB,MAAMa,UAAA,GAAkB;IACtBT,IAAA;IACAF,IAAA;IACAM,UAAA;IACAP,YAAA;IACAa,KAAA,EAAOF,UAAA,CAAWE,KAAA;IAClBC,UAAA,EAAYH,UAAA,CAAWG,UAAA;IACvBC,KAAA,EAAOJ,UAAA,CAAWI,KAAA;IAClBC,UAAA,EAAYL,UAAA,CAAWK,UAAA;IACvBC,QAAA,EAAUN,UAAA,CAAWM,QAAA;IACrBC,QAAA,EAAUP,UAAA,CAAWO,QAAA;IACrBC,OAAA,EAASR,UAAA,CAAWQ,OAAA;IACpBC,QAAA,EAAUT,UAAA,CAAWS,QAAA;IACrBC,EAAA,EAAIV,UAAA,CAAWU,EAAA;IACfC,IAAA,EAAMX,UAAA,CAAWW,IAAA;IACjBb,KAAA;IACAL,QAAA;IACAC,WAAA;IACAG,QAAA;IACAE;EACF;EAEA,OAAO,eAAAb,GAAA,CAACF,UAAA;IAAY,GAAGiB;EAAA,CAAY;AACrC","ignoreList":[]}

package/dist/esm/fields/Phone/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","PhoneInput","useProps","Phone","props","defaultValue","form","_mode","name","onChange","placeholder","_preserveValue","validators","disabled","value","defaultCountry","fieldProps","phoneProps","label","labelProps","error","helperText","readOnly","skeleton","compact","required","id","size"],"sources":["../../../../src/fields/Phone/index.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,GAAA,IAAAC,IAAA,QAAkB;AAE3B,SAASC,UAAA,QAAgB;AA8EhB,SAAAC,QAAA;AAzCF,SAASC,MAGdC,KAAA,EAAsC;EACtC;IAAMC,YAAA;IAAAC,IAAA;IAAAC,KAAA;IAAAC,IAAA;IAAAC,QAAA;IAAAC,WAAA;IAAAC,cAAA;IAAAC,UAAA;IAAAC,QAAA;IAAAC,KAAA;IAAAC,cAAA;IAAA,GAAAC;EAAA,IAAAd,QAAA,CAAAE,KAAA;EAAA,IACJa,UAAA;IACAT,IAAA;IACAF,IAAA;IACAM,UAAA;IACAP,YAAA;IACAa,KAAA,EAAAF,UAAA,CAAAE,KAAA;IACAC,UAAA,EAAAH,UAAA,CAAAG,UAAA;IACAC,KAAA,EAAAJ,UAAA,CAAAI,KAAA;IACAC,UAAA,EAAAL,UAAA,CAAAK,UAAA;IACAC,QAAA,EAAAN,UAAA,CAAAM,QAAA;IACAC,QAAA,EAAAP,UAAA,CAAAO,QAAA;IACAC,OAAG,EAAAR,UAAA,CAAAQ,OAAA;IACLC,QAAI,EAAAT,UAAc,CAAAS,QAAA;IAElBC,EAAA,EAAMV,UAAA,CAAAU,EAAkB;IACtBC,IAAA,EAAAX,UAAA,CAAAW,IAAA;IACAb,KAAA;IACAL,QAAA;IACAC,WAAA;IACAG,QAAO;IACPE;EAAuB;EACL,OAClB,eAAYf,IAAW,CAAAC,UAAA;IACvB,GAAAgB;EAAqB,EACrB;AAAqB;AACD,SACCd,KACrB","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","PhoneInput","useProps","Phone","props","defaultValue","form","_mode","name","onChange","placeholder","_preserveValue","validators","disabled","value","defaultCountry","fieldProps","phoneProps","label","labelProps","error","helperText","readOnly","skeleton","compact","required","id","size"],"sources":["../../../../src/fields/Phone/index.tsx"],"sourcesContent":[null],"mappings":"AAKA,SAASA,GAAA,IAAAC,IAAA,QAAkB;AAE3B,SAASC,UAAA,QAAgB;AA8EhB,SAAAC,QAAA;AAzCF,SAASC,MAGdC,KAAA,EAAsC;EACtC;IAAMC,YAAA;IAAAC,IAAA;IAAAC,KAAA;IAAAC,IAAA;IAAAC,QAAA;IAAAC,WAAA;IAAAC,cAAA;IAAAC,UAAA;IAAAC,QAAA;IAAAC,KAAA;IAAAC,cAAA;IAAA,GAAAC;EAAA,IAAAd,QAAA,CAAAE,KAAA;EAAA,IACJa,UAAA;IACAT,IAAA;IACAF,IAAA;IACAM,UAAA;IACAP,YAAA;IACAa,KAAA,EAAAF,UAAA,CAAAE,KAAA;IACAC,UAAA,EAAAH,UAAA,CAAAG,UAAA;IACAC,KAAA,EAAAJ,UAAA,CAAAI,KAAA;IACAC,UAAA,EAAAL,UAAA,CAAAK,UAAA;IACAC,QAAA,EAAAN,UAAA,CAAAM,QAAA;IACAC,QAAA,EAAAP,UAAA,CAAAO,QAAA;IACAC,OAAG,EAAAR,UAAA,CAAAQ,OAAA;IACLC,QAAI,EAAAT,UAAc,CAAAS,QAAA;IAElBC,EAAA,EAAMV,UAAA,CAAAU,EAAkB;IACtBC,IAAA,EAAAX,UAAA,CAAAW,IAAA;IACAb,KAAA;IACAL,QAAA;IACAC,WAAA;IACAG,QAAO;IACPE;EAAuB;EACL,OAClB,eAAYf,IAAW,CAAAC,UAAA;IACvB,GAAAgB;EAAqB,EACrB;AAAqB;AACD,SACCd,KACrB","ignoreList":[]}

package/dist/esm/fields/ReadOnly/index.mjs

@@ -1,7 +1,7 @@
-import { formatDateText, formatNumericText, Skeleton } from "@multiplatform.one/forms";
+import { FieldLayout, Skeleton, formatDateText, formatNumericText, formCommonColors } from "@multiplatform.one/forms";
 import { formatCurrency, formatPercent, formatTimeOfDay, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useMemo } from "react";
-import { Label, Text, XStack, YStack } from "tamagui";
+import { Text, XStack, YStack } from "tamagui";
 import { jsx, jsxs } from "react/jsx-runtime";
 function formatTime(value, _format) {
   if (!value) return "";
@@ -90,22 +90,20 @@ function ReadOnly({
     return formatted || emptyText;
   }, [value, type, currencySymbol, precision, dateFormat, datetimeFormat, timeFormat, emptyText]);
   const isEmpty = value === void 0 || value === null || value === "";
-  const minHeight = compact ? "$2.5" : "$3.5";
   if (skeleton) {
-    return /* @__PURE__ */jsxs(YStack, {
-      ...knobProps.gap,
+    return /* @__PURE__ */jsx(YStack, {
       ...stackProps,
-      children: [label && /* @__PURE__ */jsx(Skeleton, {
-        variant: "text",
-        width: "30%",
-        height: 14
-      }), /* @__PURE__ */jsx(Skeleton, {
-        variant: "rounded",
-        width: "100%",
-        height: compact ? 28 : 36
-      })]
+      children: /* @__PURE__ */jsx(FieldLayout, {
+        label,
+        children: /* @__PURE__ */jsx(Skeleton, {
+          variant: "rounded",
+          width: "100%",
+          height: compact ? 28 : 36
+        })
+      })
     });
   }
+  const valueColor = isEmpty ? formCommonColors.muted : formCommonColors.text;
   const renderColorSwatch = () => {
     if (type !== "Color" || isEmpty) return null;
     const colorValue = String(value);
@@ -113,9 +111,9 @@ function ReadOnly({
     return /* @__PURE__ */jsx(XStack, {
       width: "$1",
       height: "$1",
-      borderRadius: "$2",
+      ...knobProps.containerRadius,
       borderWidth: 1,
-      borderColor: "$borderColor",
+      borderColor: formCommonColors.divider,
       backgroundColor: colorValue,
       marginInlineEnd: "$2"
     });
@@ -125,8 +123,8 @@ function ReadOnly({
       return /* @__PURE__ */jsxs(XStack, {
         alignItems: "center",
         children: [renderColorSwatch(), /* @__PURE__ */jsx(Text, {
-          fontSize: knobProps.sizeToken,
-          color: isEmpty ? "$color10" : "$color",
+          ...knobProps.body,
+          color: valueColor,
           fontFamily: "$mono",
           children: displayValue
         })]
@@ -134,7 +132,6 @@ function ReadOnly({
     }
     if (type === "Link" && (linkHref || onLinkPress) && !isEmpty) {
       return /* @__PURE__ */jsx(Text, {
-        fontSize: knobProps.sizeToken,
         ...knobProps.body,
         color: "$accentColor",
         textDecorationLine: "underline",
@@ -155,62 +152,51 @@ function ReadOnly({
           height: "$0.75",
           ...knobProps.containerRadius,
           borderWidth: 1,
-          borderColor: value ? "$green10" : "$color8",
+          borderColor: value ? "$green10" : formCommonColors.divider,
           backgroundColor: value ? "$green5" : "$color3",
           alignItems: "center",
           justifyContent: "center",
-          children: value && /* @__PURE__ */jsx(Text, {
+          children: value ? /* @__PURE__ */jsx(Text, {
             fontSize: "$1",
             color: "$green10",
             children: "\u2713"
-          })
+          }) : null
         }), /* @__PURE__ */jsx(Text, {
-          fontSize: knobProps.sizeToken,
           ...knobProps.body,
-          color: isEmpty ? "$color10" : "$color",
+          color: valueColor,
           children: displayValue
         })]
       });
     }
     if (type === "LongText" || type === "Text" || type === "SmallText") {
       return /* @__PURE__ */jsx(Text, {
-        fontSize: knobProps.sizeToken,
         ...knobProps.body,
-        color: isEmpty ? "$color10" : "$color",
+        color: valueColor,
         whiteSpace: "pre-wrap",
         children: displayValue
       });
     }
     return /* @__PURE__ */jsx(Text, {
-      fontSize: knobProps.sizeToken,
       ...knobProps.body,
-      color: isEmpty ? "$color10" : "$color",
+      color: valueColor,
       children: displayValue
     });
   };
-  return /* @__PURE__ */jsxs(YStack, {
-    ...knobProps.gap,
+  return /* @__PURE__ */jsx(YStack, {
     ...stackProps,
-    children: [label && /* @__PURE__ */jsx(Label, {
-      color: "$color10",
-      fontSize: "$2",
-      children: label
-    }), /* @__PURE__ */jsx(XStack, {
-      ...knobProps.borderRadius,
-      ...{
-        backgroundColor: "$color2"
-      },
-      paddingVertical: compact ? "$1" : "$2",
-      paddingHorizontal: compact ? "$2" : "$3",
-      borderColor: "$color5",
-      minHeight,
-      alignItems: "center",
-      children: renderValue()
-    }), helperText && /* @__PURE__ */jsx(Text, {
-      color: "$color11",
-      fontSize: "$2",
-      children: helperText
-    })]
+    children: /* @__PURE__ */jsx(FieldLayout, {
+      label,
+      helperText,
+      children: /* @__PURE__ */jsx(XStack, {
+        ...knobProps.surface,
+        ...knobProps.borderRadius,
+        paddingVertical: compact ? "$1" : "$2",
+        paddingHorizontal: compact ? "$2" : "$3",
+        minHeight: compact ? "$2.5" : "$3.5",
+        alignItems: "center",
+        children: renderValue()
+      })
+    })
   });
 }
 export { ReadOnly };

package/dist/esm/fields/ReadOnly/index.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["formatDateText","formatNumericText","Skeleton","formatCurrency","formatPercent","formatTimeOfDay","useResolvedKnobs","useMemo","Label","Text","XStack","YStack","jsx","jsxs","formatTime","value","_format","formatNumeric","type","precision","currencySymbol","Number","isNaN","Math","round","symbol","toString","formatValue","options","parseFloat","String","dateFormat","withTime","datetimeFormat","timeFormat","toUpperCase","ReadOnly","label","emptyText","linkHref","onLinkPress","helperText","readOnly","_readOnly","skeleton","compact","stackProps","knobProps","displayValue","formatted","isEmpty","minHeight","gap","children","variant","width","height","renderColorSwatch","colorValue","test","borderRadius","borderWidth","borderColor","backgroundColor","marginInlineEnd","renderValue","alignItems","fontSize","sizeToken","color","fontFamily","body","textDecorationLine","cursor","onPress","hoverStyle","opacity","containerRadius","justifyContent","whiteSpace","paddingVertical","paddingHorizontal"],"sources":["../../../../src/fields/ReadOnly/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,cAAA,EAAgBC,iBAAA,EAAmBC,QAAA,QAAgB;AAC5D,SACEC,cAAA,EACAC,aAAA,EACAC,eAAA,EACAC,gBAAA,QACK;AACP,SAASC,OAAA,QAAe;AACxB,SAASC,KAAA,EAAOC,IAAA,EAAMC,MAAA,EAAQC,MAAA,QAAgC;AAiJxD,SACYC,GAAA,EADZC,IAAA;AAtGN,SAASC,WAAWC,KAAA,EAAeC,OAAA,EAA0B;EAC3D,IAAI,CAACD,KAAA,EAAO,OAAO;EACnB,OAAOV,eAAA,CAAgBU,KAAK;AAC9B;AAEA,SAASE,cACPF,KAAA,EACAG,IAAA,EACAC,SAAA,EACAC,cAAA,EACQ;EACR,IAAIL,KAAA,KAAU,UAAaA,KAAA,KAAU,QAAQM,MAAA,CAAOC,KAAA,CAAMP,KAAK,GAAG,OAAO;EACzE,QAAQG,IAAA;IACN,KAAK;MACH,OAAOjB,iBAAA,CAAkBsB,IAAA,CAAKC,KAAA,CAAMT,KAAK,GAAG;QAAEI,SAAA,EAAW;MAAE,CAAC;IAC9D,KAAK;MACH,OAAOlB,iBAAA,CAAkBc,KAAA,EAAO;QAAEI;MAAU,CAAC;IAC/C,KAAK;MAGH,OAAOhB,cAAA,CAAeY,KAAA,EAAO;QAAEI,SAAA;QAAWM,MAAA,EAAQL;MAAe,CAAC;IACpE,KAAK;MACH,OAAOhB,aAAA,CAAcW,KAAA,EAAO;QAAEI;MAAU,CAAC;IAC3C;MACE,OAAOJ,KAAA,CAAMW,QAAA,CAAS;EAC1B;AACF;AAEA,SAASC,YACPZ,KAAA,EACAG,IAAA,EACAU,OAAA,EAOQ;EACR,IAAIb,KAAA,KAAU,UAAaA,KAAA,KAAU,MAAM,OAAO;EAClD,QAAQG,IAAA;IACN,KAAK;MACH,OAAOH,KAAA,GAAQ,QAAQ;IACzB,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;MACH,OAAOE,aAAA,CACL,OAAOF,KAAA,KAAU,WAAWA,KAAA,GAAQM,MAAA,CAAOQ,UAAA,CAAWC,MAAA,CAAOf,KAAK,CAAC,GACnEG,IAAA,EACAU,OAAA,CAAQT,SAAA,EACRS,OAAA,CAAQR,cACV;IACF,KAAK;MACH,OAAOL,KAAA,KAAU,KAAK,KAAKf,cAAA,CAAe8B,MAAA,CAAOf,KAAK,GAAG;QAAEgB,UAAA,EAAYH,OAAA,CAAQG;MAAW,CAAC;IAC7F,KAAK;MACH,OAAOhB,KAAA,KAAU,KACb,KACAf,cAAA,CAAe8B,MAAA,CAAOf,KAAK,GAAG;QAAEiB,QAAA,EAAU;QAAMD,UAAA,EAAYH,OAAA,CAAQK;MAAe,CAAC;IAC1F,KAAK;MACH,OAAOnB,UAAA,CAAWgB,MAAA,CAAOf,KAAK,GAAGa,OAAA,CAAQM,UAAU;IACrD,KAAK;MACH,OAAOJ,MAAA,CAAOf,KAAK,EAAEoB,WAAA,CAAY;IACnC;MACE,OAAOL,MAAA,CAAOf,KAAK;EACvB;AACF;AAEO,SAASqB,SAAS;EACvBC,KAAA;EACAtB,KAAA;EACAG,IAAA,GAAO;EACPE,cAAA,GAAiB;EACjBD,SAAA,GAAY;EACZY,UAAA;EACAE,cAAA;EACAC,UAAA;EACAI,SAAA,GAAY;EACZC,QAAA;EACAC,WAAA;EACAC,UAAA;EACAC,QAAA,EAAUC,SAAA;EACVC,QAAA,GAAW;EACXC,OAAA,GAAU;EACV,GAAGC;AACL,GAAkB;EAChB,MAAM;IAAEC;EAAU,IAAIzC,gBAAA,CAAiB;EACvC,MAAM0C,YAAA,GAAezC,OAAA,CAAQ,MAAM;IACjC,MAAM0C,SAAA,GAAYtB,WAAA,CAAYZ,KAAA,EAAOG,IAAA,EAAM;MACzCE,cAAA;MACAD,SAAA;MACAY,UAAA;MACAE,cAAA;MACAC;IACF,CAAC;IACD,OAAOe,SAAA,IAAaX,SAAA;EACtB,GAAG,CAACvB,KAAA,EAAOG,IAAA,EAAME,cAAA,EAAgBD,SAAA,EAAWY,UAAA,EAAYE,cAAA,EAAgBC,UAAA,EAAYI,SAAS,CAAC;EAC9F,MAAMY,OAAA,GAAUnC,KAAA,KAAU,UAAaA,KAAA,KAAU,QAAQA,KAAA,KAAU;EACnE,MAAMoC,SAAA,GAAYN,OAAA,GAAU,SAAS;EAErC,IAAID,QAAA,EAAU;IACZ,OACE,eAAA/B,IAAA,CAACF,MAAA;MAAQ,GAAGoC,SAAA,CAAUK,GAAA;MAAM,GAAGN,UAAA;MAC5BO,QAAA,GAAAhB,KAAA,IAAS,eAAAzB,GAAA,CAACV,QAAA;QAASoD,OAAA,EAAQ;QAAOC,KAAA,EAAM;QAAMC,MAAA,EAAQ;MAAA,CAAI,GAC3D,eAAA5C,GAAA,CAACV,QAAA;QAASoD,OAAA,EAAQ;QAAUC,KAAA,EAAM;QAAOC,MAAA,EAAQX,OAAA,GAAU,KAAK;MAAA,CAAI;IAAA,CACtE;EAEJ;EAEA,MAAMY,iBAAA,GAAoBA,CAAA,KAAM;IAC9B,IAAIvC,IAAA,KAAS,WAAWgC,OAAA,EAAS,OAAO;IACxC,MAAMQ,UAAA,GAAa5B,MAAA,CAAOf,KAAK;IAC/B,IAAI,CAAC,qCAAqC4C,IAAA,CAAKD,UAAU,GAAG,OAAO;IACnE,OACE,eAAA9C,GAAA,CAACF,MAAA;MACC6C,KAAA,EAAM;MACNC,MAAA,EAAO;MACPI,YAAA,EAAa;MACbC,WAAA,EAAa;MACbC,WAAA,EAAY;MACZC,eAAA,EAAiBL,UAAA;MACjBM,eAAA,EAAgB;IAAA,CAClB;EAEJ;EAEA,MAAMC,WAAA,GAAcA,CAAA,KAAM;IACxB,IAAI/C,IAAA,KAAS,WAAW,CAACgC,OAAA,EAAS;MAChC,OACE,eAAArC,IAAA,CAACH,MAAA;QAAOwD,UAAA,EAAW;QAChBb,QAAA,GAAAI,iBAAA,CAAkB,GACnB,eAAA7C,GAAA,CAACH,IAAA;UACC0D,QAAA,EAAUpB,SAAA,CAAUqB,SAAA;UACpBC,KAAA,EAAOnB,OAAA,GAAU,aAAa;UAC9BoB,UAAA,EAAW;UAEVjB,QAAA,EAAAL;QAAA,CACH;MAAA,CACF;IAEJ;IACA,IAAI9B,IAAA,KAAS,WAAWqB,QAAA,IAAYC,WAAA,KAAgB,CAACU,OAAA,EAAS;MAC5D,OACE,eAAAtC,GAAA,CAACH,IAAA;QACC0D,QAAA,EAAUpB,SAAA,CAAUqB,SAAA;QACnB,GAAGrB,SAAA,CAAUwB,IAAA;QACdF,KAAA,EAAM;QACNG,kBAAA,EAAmB;QACnBC,MAAA,EAAO;QACPC,OAAA,EAASlC,WAAA;QACTmC,UAAA,EAAY;UAAEC,OAAA,EAAS;QAAI;QAE1BvB,QAAA,EAAAL;MAAA,CACH;IAEJ;IACA,IAAI9B,IAAA,KAAS,SAAS;MACpB,OACE,eAAAL,IAAA,CAACH,MAAA;QAAOwD,UAAA,EAAW;QAASd,GAAA,EAAI;QAC9BC,QAAA,kBAAAzC,GAAA,CAACF,MAAA;UACC6C,KAAA,EAAM;UACNC,MAAA,EAAO;UAKN,GAAGT,SAAA,CAAU8B,eAAA;UACdhB,WAAA,EAAa;UACbC,WAAA,EAAa/C,KAAA,GAAQ,aAAa;UAClCgD,eAAA,EAAiBhD,KAAA,GAAQ,YAAY;UACrCmD,UAAA,EAAW;UACXY,cAAA,EAAe;UAEdzB,QAAA,EAAAtC,KAAA,IACC,eAAAH,GAAA,CAACH,IAAA;YAAK0D,QAAA,EAAS;YAAKE,KAAA,EAAM;YACvBhB,QAAA;UAAA,CACH;QAAA,CAEJ,GACA,eAAAzC,GAAA,CAACH,IAAA;UACC0D,QAAA,EAAUpB,SAAA,CAAUqB,SAAA;UACnB,GAAGrB,SAAA,CAAUwB,IAAA;UACdF,KAAA,EAAOnB,OAAA,GAAU,aAAa;UAE7BG,QAAA,EAAAL;QAAA,CACH;MAAA,CACF;IAEJ;IACA,IAAI9B,IAAA,KAAS,cAAcA,IAAA,KAAS,UAAUA,IAAA,KAAS,aAAa;MAClE,OACE,eAAAN,GAAA,CAACH,IAAA;QACC0D,QAAA,EAAUpB,SAAA,CAAUqB,SAAA;QACnB,GAAGrB,SAAA,CAAUwB,IAAA;QACdF,KAAA,EAAOnB,OAAA,GAAU,aAAa;QAC9B6B,UAAA,EAAW;QAEV1B,QAAA,EAAAL;MAAA,CACH;IAEJ;IACA,OACE,eAAApC,GAAA,CAACH,IAAA;MACC0D,QAAA,EAAUpB,SAAA,CAAUqB,SAAA;MACnB,GAAGrB,SAAA,CAAUwB,IAAA;MACdF,KAAA,EAAOnB,OAAA,GAAU,aAAa;MAE7BG,QAAA,EAAAL;IAAA,CACH;EAEJ;EAEA,OACE,eAAAnC,IAAA,CAACF,MAAA;IAAQ,GAAGoC,SAAA,CAAUK,GAAA;IAAM,GAAGN,UAAA;IAC5BO,QAAA,GAAAhB,KAAA,IACC,eAAAzB,GAAA,CAACJ,KAAA;MAAM6D,KAAA,EAAM;MAAWF,QAAA,EAAS;MAC9Bd,QAAA,EAAAhB;IAAA,CACH,GAEF,eAAAzB,GAAA,CAACF,MAAA;MACE,GAAGqC,SAAA,CAAUa,YAAA;MACb,GAAG;QAAEG,eAAA,EAAiB;MAAU;MACjCiB,eAAA,EAAiBnC,OAAA,GAAU,OAAO;MAClCoC,iBAAA,EAAmBpC,OAAA,GAAU,OAAO;MACpCiB,WAAA,EAAY;MACZX,SAAA;MACAe,UAAA,EAAW;MAEVb,QAAA,EAAAY,WAAA,CAAY;IAAA,CACf,GACCxB,UAAA,IACC,eAAA7B,GAAA,CAACH,IAAA;MAAK4D,KAAA,EAAM;MAAWF,QAAA,EAAS;MAC7Bd,QAAA,EAAAZ;IAAA,CACH;EAAA,CAEJ;AAEJ","ignoreList":[]}
+{"version":3,"names":["FieldLayout","Skeleton","formatDateText","formatNumericText","formCommonColors","formatCurrency","formatPercent","formatTimeOfDay","useResolvedKnobs","useMemo","Text","XStack","YStack","jsx","jsxs","formatTime","value","_format","formatNumeric","type","precision","currencySymbol","Number","isNaN","Math","round","symbol","toString","formatValue","options","parseFloat","String","dateFormat","withTime","datetimeFormat","timeFormat","toUpperCase","ReadOnly","label","emptyText","linkHref","onLinkPress","helperText","readOnly","_readOnly","skeleton","compact","stackProps","knobProps","displayValue","formatted","isEmpty","children","variant","width","height","valueColor","muted","text","renderColorSwatch","colorValue","test","containerRadius","borderWidth","borderColor","divider","backgroundColor","marginInlineEnd","renderValue","alignItems","body","color","fontFamily","textDecorationLine","cursor","onPress","hoverStyle","opacity","gap","justifyContent","fontSize","whiteSpace","surface","borderRadius","paddingVertical","paddingHorizontal","minHeight"],"sources":["../../../../src/fields/ReadOnly/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/fields/ReadOnly/index.native.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { formatDateText, formatNumericText, Skeleton } from "@multiplatform.one/forms";
+import { FieldLayout, Skeleton, formatDateText, formatNumericText, formCommonColors } from "@multiplatform.one/forms";
 import { formatCurrency, formatPercent, formatTimeOfDay, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useMemo } from "react";
-import { Label, Text, XStack, YStack } from "tamagui";
+import { Text, XStack, YStack } from "tamagui";
 function formatTime(value, _format) {
   if (!value) return "";
   return formatTimeOfDay(value);
@@ -91,22 +91,20 @@ function ReadOnly(param) {
     return formatted || emptyText;
   }, [value, type, currencySymbol, precision, dateFormat, datetimeFormat, timeFormat, emptyText]);
   var isEmpty = value === void 0 || value === null || value === "";
-  var minHeight = compact ? "$2.5" : "$3.5";
   if (skeleton) {
-    return /* @__PURE__ */_jsxs(YStack, {
-      ...knobProps.gap,
+    return /* @__PURE__ */_jsx(YStack, {
       ...stackProps,
-      children: [label && /* @__PURE__ */_jsx(Skeleton, {
-        variant: "text",
-        width: "30%",
-        height: 14
-      }), /* @__PURE__ */_jsx(Skeleton, {
-        variant: "rounded",
-        width: "100%",
-        height: compact ? 28 : 36
-      })]
+      children: /* @__PURE__ */_jsx(FieldLayout, {
+        label,
+        children: /* @__PURE__ */_jsx(Skeleton, {
+          variant: "rounded",
+          width: "100%",
+          height: compact ? 28 : 36
+        })
+      })
     });
   }
+  var valueColor = isEmpty ? formCommonColors.muted : formCommonColors.text;
   var renderColorSwatch = function renderColorSwatch2() {
     if (type !== "Color" || isEmpty) return null;
     var colorValue = String(value);
@@ -114,9 +112,9 @@ function ReadOnly(param) {
     return /* @__PURE__ */_jsx(XStack, {
       width: "$1",
       height: "$1",
-      borderRadius: "$2",
+      ...knobProps.containerRadius,
       borderWidth: 1,
-      borderColor: "$borderColor",
+      borderColor: formCommonColors.divider,
       backgroundColor: colorValue,
       marginInlineEnd: "$2"
     });
@@ -126,8 +124,8 @@ function ReadOnly(param) {
       return /* @__PURE__ */_jsxs(XStack, {
         alignItems: "center",
         children: [renderColorSwatch(), /* @__PURE__ */_jsx(Text, {
-          fontSize: knobProps.sizeToken,
-          color: isEmpty ? "$color10" : "$color",
+          ...knobProps.body,
+          color: valueColor,
           fontFamily: "$mono",
           children: displayValue
         })]
@@ -135,7 +133,6 @@ function ReadOnly(param) {
     }
     if (type === "Link" && (linkHref || onLinkPress) && !isEmpty) {
       return /* @__PURE__ */_jsx(Text, {
-        fontSize: knobProps.sizeToken,
         ...knobProps.body,
         color: "$accentColor",
         textDecorationLine: "underline",
@@ -160,60 +157,51 @@ function ReadOnly(param) {
           // (LC-55 FRAGMENT-LICENSE).
           ...knobProps.containerRadius,
           borderWidth: 1,
-          borderColor: value ? "$green10" : "$color8",
+          borderColor: value ? "$green10" : formCommonColors.divider,
           backgroundColor: value ? "$green5" : "$color3",
           alignItems: "center",
           justifyContent: "center",
-          children: value && /* @__PURE__ */_jsx(Text, {
+          children: value ? /* @__PURE__ */_jsx(Text, {
             fontSize: "$1",
             color: "$green10",
             children: "\u2713"
-          })
+          }) : null
         }), /* @__PURE__ */_jsx(Text, {
-          fontSize: knobProps.sizeToken,
           ...knobProps.body,
-          color: isEmpty ? "$color10" : "$color",
+          color: valueColor,
           children: displayValue
         })]
       });
     }
     if (type === "LongText" || type === "Text" || type === "SmallText") {
       return /* @__PURE__ */_jsx(Text, {
-        fontSize: knobProps.sizeToken,
         ...knobProps.body,
-        color: isEmpty ? "$color10" : "$color",
+        color: valueColor,
         whiteSpace: "pre-wrap",
         children: displayValue
       });
     }
     return /* @__PURE__ */_jsx(Text, {
-      fontSize: knobProps.sizeToken,
       ...knobProps.body,
-      color: isEmpty ? "$color10" : "$color",
+      color: valueColor,
       children: displayValue
     });
   };
-  return /* @__PURE__ */_jsxs(YStack, {
-    ...knobProps.gap,
+  return /* @__PURE__ */_jsx(YStack, {
     ...stackProps,
-    children: [label && /* @__PURE__ */_jsx(Label, {
-      color: "$color10",
-      fontSize: "$2",
-      children: label
-    }), /* @__PURE__ */_jsx(XStack, {
-      ...knobProps.borderRadius,
-      backgroundColor: "$color2",
-      paddingVertical: compact ? "$1" : "$2",
-      paddingHorizontal: compact ? "$2" : "$3",
-      borderColor: "$color5",
-      minHeight,
-      alignItems: "center",
-      children: renderValue()
-    }), helperText && /* @__PURE__ */_jsx(Text, {
-      color: "$color11",
-      fontSize: "$2",
-      children: helperText
-    })]
+    children: /* @__PURE__ */_jsx(FieldLayout, {
+      label,
+      helperText,
+      children: /* @__PURE__ */_jsx(XStack, {
+        ...knobProps.surface,
+        ...knobProps.borderRadius,
+        paddingVertical: compact ? "$1" : "$2",
+        paddingHorizontal: compact ? "$2" : "$3",
+        minHeight: compact ? "$2.5" : "$3.5",
+        alignItems: "center",
+        children: renderValue()
+      })
+    })
   });
 }
 export { ReadOnly };