@multiplatform.one/forms 7.45.1 → 7.47.0

package/dist/cjs/FormSection.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","FormSection_exports","__export","Fieldset","FormSection","FormSectionStack","formFieldGap","import_formSpacing2","formReadableMaxWidth","formSectionGap","module","exports","import_jsx_runtime","require","import_theme","import_tamagui","import_formSpacing","param","label","children","maxWidth","gap","testID","fieldset","useFieldset","isWeb","knobProps","useResolvedKnobs","resolvedGap","jsxs","YStack","render","String","sizeToken","width","alignSelf","style","borderWidth","margin","minWidth","padding","jsx","Text","fontWeight","color","textAccentColor","marginBottom","float","role","props","gapLg"],"sources":["../../src/FormSection.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,mBAAA;AAAAC,QAAA,CAAAD,mBAAA;EAAAE,QAAA,EAAAA,CAAA,KAAAA,QAAA;EAAAC,WAAA,EAAAA,CAAA,KAAAA,WAAA;EAAAC,gBAAA,EAAAA,CAAA,KAAAA,gBAAA;EAAAC,YAAA,EAAAA,CAAA,KAAAC,mBAAA,CAAAD,YAAA;EAAAE,oBAAA,EAAAA,CAAA,KAAAD,mBAAA,CAAAC,oBAAA;EAAAC,cAAA,EAAAA,CAAA,KAAAF,mBAAA,CAAAE;AAAA;AACAC,MAAA,CAAAC,OAAA,GAAAf,YAAiC,CAAAK,mBAAA;AACjC,IAAAW,kBAAoC,GAAAC,OAAA;AACpC,IAAAC,YAAA,GAAAD,OAAqC;AA0IrC,IAAAE,cAAA,GAAAF,OAAmE;AAzF/D,IAAAG,kBAAA,GAAAH,OAAA;AAbG,IAAAN,mBAAqB,GAAAM,OAAA;AAAA,SAC1BT,YAAAa,KAAA;EACA;IAAAC,KAAA;IAAAC,QAAA;IAAAC,QAAA,GAAAJ,kBAAA,CAAAR,oBAAA;IAAAa,GAAA;IAAAC,MAAA;IAAAC,QAAA;EAAA,IAAAN,KAAA;EACA,IAAAO,WAAW,GAAAD,QAAA,IAAAR,cAAA,CAAAU,KAAA;EACX;IAAAC;EAAA,QAAAZ,YAAA,CAAAa,gBAAA;EACA,IAAAC,WAAA,GAAAP,GAAA,aAAAA,GAAA,cAAAA,GAAA,GAAAK,SAAA,CAAAL,GAAA,CAAAA,GAAA;EACA,sBAAW,IAAAT,kBAAA,CAAAiB,IAAA,EAAAd,cAAA,CAAAe,MAAA;IACQ,IAAAN,WAAA;MACnBO,MAAM;IACN,IAAM,EAAE;IACR,uBAAoB,EAAO;IAE3B,mBACE,EAAAP,WAAA;IAAC,kBAAAQ,MAAA,CAAAJ,WAAA;IAAA,mBAAAF,SAAA,CAAAO,SAAA;IAAA,aACM,EAAAX,MAAgB;IAAiCD,GACtD,EAAAO,WAAA;IAAsBM,KACtB;IAAsCd,QACtC,EAAAA,QAAA,KAAgB,OAAO,QAAW,IAAAA,QAAA;IAAAe,SAClC,EAAAf,QAAA,KAAiB,OAAU;IAAA;IACd,IACbI,WAAK;MACLY,KAAA,EAAM;QACNC,WAAU;QACVC,MAAA,GAAW;QAEVC,QAAI;QAECC,OAAO;MAAA;IACQ,MACb;IAAQrB,QACR,GAAUD,KACV,GAAAM,WAAS,sBAAAZ,kBAAA,CAAA6B,GAAA,EAAA1B,cAAA,CAAA2B,IAAA;MACXX,MAAA;MACF,iBACC;MAEJ,GAAAL,SAAA,CAAAR,KAAA;MAAAyB,UACC;MACEC,KAAC,EAAAlB,SAAA,CAAAmB,eAAA;MAAA;MAAAT,KACC;QAAOI,OACP;QAAgBM,YACZ,GAAU;QAAAC,KACd;QAAWb,KACX;MAAiB;MAEkDf,QAElE,EAAAD;IAAA,wBAAAN,kBAAA,CAAA6B,GAAA,EAAA1B,cAAA,CAAA2B,IAAA;MACH,GAAAhB,SAEA,CAAAR,KAAA;MAAAyB,UAAC;MAAAC,KAAA,EAAAlB,SAAA,CAAAmB,eAAA;MAAAG,IACE,WAAG;MAAU,YACd;MAAW7B,QACX,EAAAD;IAAiB,SACjB,EAAKC,QACL;EAEC;AAAA;AAGH,SACHhB,SAAA8C,KAAA;EAAA,0BAAArC,kBAAA,CAAA6B,GAAA,EAAArC,WAAA;IAAA,GAAA6C;EACH;AAEJ;AAMO,SAAS5C,gBAAkCA,CAAAY,KAAA;EAChD;IAAAE,QAAO;IAAAE;EAAA,IAAAJ,KAAA;EACT;IAAAS;EAAA,QAAAZ,YAAA,CAAAa,gBAAA;EAcO,IAAAC,WAAS,GAAAP,GAAA,KAAmB,QAAAA,GAAU,KAAI,KAA0B,IAAAA,GAAA,GAAAK,SAAA,CAAAwB,KAAA,CAAA7B,GAAA;EACzE,OAAM,eAAY,IAAIT,kBAAA,CAAA6B,GAAA,EAAA1B,cAAiB,CAAAe,MAAA;IACvC,6BAA2B;IAC3B,kBACE,EAAAE,MAAA,CAAAJ,WAAA;IAAC,mBAAAF,SAAA,CAAAO,SAAA;IAAAZ,GAAA,EAAAO,WAAA;IAAAM,KACC;IAA4Bf;EACQ;AACT","ignoreList":[]}
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","FormSection_exports","Fieldset","FormSection","FormSectionStack","formFieldGap","import_formSpacing2","formReadableMaxWidth","formSectionGap","module","exports","import_jsx_runtime","require","import_theme","import_tamagui","import_formSpacing","param","label","children","maxWidth","gap","testID","fieldset","useFieldset","isWeb","knobProps","useResolvedKnobs","resolvedGap","jsxs","YStack","render","String","sizeToken","width","alignSelf","style","borderWidth","margin","minWidth","padding","jsx","Text","fontWeight","color","textAccentColor","marginBottom","float","role","props","gapLg"],"sources":["FormSection.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n  for (var name in all)\n    __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n  if (from && typeof from === \"object\" || typeof from === \"function\") {\n    for (let key of __getOwnPropNames(from))\n      if (!__hasOwnProp.call(to, key) && key !== except)\n        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n  }\n  return to;\n};\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar FormSection_exports = {};\n__export(FormSection_exports, {\n  Fieldset: () => Fieldset,\n  FormSection: () => FormSection,\n  FormSectionStack: () => FormSectionStack,\n  formFieldGap: () => import_formSpacing2.formFieldGap,\n  formReadableMaxWidth: () => import_formSpacing2.formReadableMaxWidth,\n  formSectionGap: () => import_formSpacing2.formSectionGap\n});\nmodule.exports = __toCommonJS(FormSection_exports);\nvar import_jsx_runtime = require(\"react/jsx-runtime\");\nvar import_theme = require(\"@multiplatform.one/theme\");\nvar import_tamagui = require(\"tamagui\");\nvar import_formSpacing = require(\"./formSpacing\");\nvar import_formSpacing2 = require(\"./formSpacing\");\nfunction FormSection(param) {\n  var { label, children, maxWidth = import_formSpacing.formReadableMaxWidth, gap, testID, fieldset = true } = param;\n  var useFieldset = fieldset && import_tamagui.isWeb;\n  var { knobProps } = (0, import_theme.useResolvedKnobs)();\n  var resolvedGap = gap !== null && gap !== void 0 ? gap : knobProps.gap.gap;\n  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {\n    ...useFieldset ? {\n      render: \"fieldset\"\n    } : {},\n    \"data-mpo-form-section\": \"\",\n    \"data-mpo-fieldset\": useFieldset ? \"\" : void 0,\n    \"data-field-gap\": String(resolvedGap),\n    \"data-size-token\": knobProps.sizeToken,\n    \"data-testid\": testID,\n    gap: resolvedGap,\n    width: \"100%\",\n    maxWidth: maxWidth === \"fluid\" ? void 0 : maxWidth,\n    alignSelf: maxWidth === \"fluid\" ? void 0 : \"flex-start\",\n    // Reset browser fieldset chrome; we own spacing via tokens.\n    ...useFieldset ? {\n      style: {\n        borderWidth: 0,\n        margin: 0,\n        minWidth: 0,\n        padding: 0\n      }\n    } : {},\n    children: [\n      label ? useFieldset ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Text, {\n        render: \"legend\",\n        \"data-mpo-legend\": \"\",\n        ...knobProps.label,\n        fontWeight: \"400\",\n        color: knobProps.textAccentColor,\n        // legend is inline by default; stretch to a full heading row\n        style: {\n          padding: 0,\n          marginBottom: 0,\n          float: \"left\",\n          width: \"100%\"\n        },\n        children: label\n      }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Text, {\n        ...knobProps.label,\n        fontWeight: \"400\",\n        color: knobProps.textAccentColor,\n        role: \"heading\",\n        \"aria-level\": 3,\n        children: label\n      }) : null,\n      children\n    ]\n  });\n}\nfunction Fieldset(props) {\n  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormSection, {\n    ...props\n  });\n}\nfunction FormSectionStack(param) {\n  var { children, gap } = param;\n  var { knobProps } = (0, import_theme.useResolvedKnobs)();\n  var resolvedGap = gap !== null && gap !== void 0 ? gap : knobProps.gapLg.gap;\n  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, {\n    \"data-mpo-form-section-stack\": \"\",\n    \"data-section-gap\": String(resolvedGap),\n    \"data-size-token\": knobProps.sizeToken,\n    gap: resolvedGap,\n    width: \"100%\",\n    children\n  });\n}\n//# sourceMappingURL=FormSection.js.map\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/InputParts/PasswordReveal.cjs

@@ -0,0 +1,96 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var PasswordReveal_exports = {};
+__export(PasswordReveal_exports, {
+  HIDE_PASSWORD: () => HIDE_PASSWORD,
+  PasswordReveal: () => PasswordReveal,
+  SHOW_PASSWORD: () => SHOW_PASSWORD,
+  usePasswordReveal: () => usePasswordReveal
+});
+module.exports = __toCommonJS(PasswordReveal_exports);
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_index = require("./index.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const SHOW_PASSWORD = "Show password";
+const HIDE_PASSWORD = "Hide password";
+function domInput(node, id) {
+  const 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) {
+  const el = domInput(node, id);
+  if (!el || typeof el.selectionStart !== "number") return null;
+  return {
+    start: el.selectionStart,
+    end: el.selectionEnd ?? el.selectionStart
+  };
+}
+function usePasswordReveal({
+  inputRef,
+  id,
+  text
+}) {
+  const [revealed, setRevealed] = (0, import_react2.useState)(false);
+  const pendingSelection = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    if (!text) setRevealed(false);
+  }, [text]);
+  (0, import_react2.useLayoutEffect)(() => {
+    const selection = pendingSelection.current;
+    if (!selection) return;
+    pendingSelection.current = null;
+    const el = domInput(inputRef.current, id);
+    el?.focus();
+    el?.setSelectionRange(selection.start, selection.end);
+  }, [id, inputRef, revealed]);
+  const toggle = (0, import_react2.useCallback)(() => {
+    pendingSelection.current = readSelection(inputRef.current, id);
+    setRevealed(open => !open);
+  }, [id, inputRef]);
+  return {
+    revealed,
+    toggle
+  };
+}
+function PasswordReveal({
+  revealed,
+  onToggle,
+  controls,
+  disabled,
+  size
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Input.Action, {
+    label: revealed ? HIDE_PASSWORD : SHOW_PASSWORD,
+    pressed: revealed,
+    controls,
+    disabled,
+    size,
+    onPress: onToggle,
+    children: revealed ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.EyeSlashIcon, {}) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.EyeIcon, {})
+  });
+}

package/dist/cjs/InputParts/PasswordReveal.native.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var PasswordReveal_exports = {};
+__export(PasswordReveal_exports, {
+  HIDE_PASSWORD: () => HIDE_PASSWORD,
+  PasswordReveal: () => PasswordReveal,
+  SHOW_PASSWORD: () => SHOW_PASSWORD,
+  usePasswordReveal: () => usePasswordReveal
+});
+module.exports = __toCommonJS(PasswordReveal_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_index = require("./index.native.js");
+var SHOW_PASSWORD = "Show password";
+var HIDE_PASSWORD = "Hide password";
+function domInput(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 = domInput(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 usePasswordReveal(param) {
+  var {
+    inputRef,
+    id,
+    text
+  } = param;
+  var [revealed, setRevealed] = (0, import_react2.useState)(false);
+  var pendingSelection = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(function () {
+    if (!text) setRevealed(false);
+  }, [text]);
+  (0, import_react2.useLayoutEffect)(function () {
+    var selection = pendingSelection.current;
+    if (!selection) return;
+    pendingSelection.current = null;
+    var el = domInput(inputRef.current, id);
+    el === null || el === void 0 ? void 0 : el.focus();
+    el === null || el === void 0 ? void 0 : el.setSelectionRange(selection.start, selection.end);
+  }, [id, inputRef, revealed]);
+  var toggle = (0, import_react2.useCallback)(function () {
+    pendingSelection.current = readSelection(inputRef.current, id);
+    setRevealed(function (open) {
+      return !open;
+    });
+  }, [id, inputRef]);
+  return {
+    revealed,
+    toggle
+  };
+}
+function PasswordReveal(param) {
+  var {
+    revealed,
+    onToggle,
+    controls,
+    disabled,
+    size
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Input.Action, {
+    label: revealed ? HIDE_PASSWORD : SHOW_PASSWORD,
+    pressed: revealed,
+    controls,
+    disabled,
+    size,
+    onPress: onToggle,
+    children: revealed ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.EyeSlashIcon, {}) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.EyeIcon, {})
+  });
+}
+//# sourceMappingURL=PasswordReveal.native.js.map

package/dist/cjs/InputParts/PasswordReveal.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","PasswordReveal_exports","HIDE_PASSWORD","PasswordReveal","SHOW_PASSWORD","usePasswordReveal","module","exports","import_jsx_runtime","require","import_react","import_react2","import_index","domInput","node","id","fromRef","setSelectionRange","document","getElementById","readSelection","_el_selectionEnd","el","selectionStart","start","end","selectionEnd","param","inputRef","text","revealed","setRevealed","useState","pendingSelection","useRef","useEffect","useLayoutEffect","selection","current","focus","toggle","useCallback","open","onToggle","controls","disabled","size","jsx","Input","Action","label","pressed","onPress","children","EyeSlashIcon","EyeIcon"],"sources":["PasswordReveal.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n  for (var name in all)\n    __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n  if (from && typeof from === \"object\" || typeof from === \"function\") {\n    for (let key of __getOwnPropNames(from))\n      if (!__hasOwnProp.call(to, key) && key !== except)\n        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n  }\n  return to;\n};\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar PasswordReveal_exports = {};\n__export(PasswordReveal_exports, {\n  HIDE_PASSWORD: () => HIDE_PASSWORD,\n  PasswordReveal: () => PasswordReveal,\n  SHOW_PASSWORD: () => SHOW_PASSWORD,\n  usePasswordReveal: () => usePasswordReveal\n});\nmodule.exports = __toCommonJS(PasswordReveal_exports);\nvar import_jsx_runtime = require(\"react/jsx-runtime\");\nvar import_react = require(\"@phosphor-icons/react\");\nvar import_react2 = require(\"react\");\nvar import_index = require(\"./index\");\nvar SHOW_PASSWORD = \"Show password\";\nvar HIDE_PASSWORD = \"Hide password\";\nfunction domInput(node, id) {\n  var fromRef = node;\n  if (fromRef && typeof fromRef.setSelectionRange === \"function\") {\n    return fromRef;\n  }\n  if (typeof document === \"undefined\" || !id) return null;\n  return document.getElementById(id);\n}\nfunction readSelection(node, id) {\n  var _el_selectionEnd;\n  var el = domInput(node, id);\n  if (!el || typeof el.selectionStart !== \"number\") return null;\n  return {\n    start: el.selectionStart,\n    end: (_el_selectionEnd = el.selectionEnd) !== null && _el_selectionEnd !== void 0 ? _el_selectionEnd : el.selectionStart\n  };\n}\nfunction usePasswordReveal(param) {\n  var { inputRef, id, text } = param;\n  var [revealed, setRevealed] = (0, import_react2.useState)(false);\n  var pendingSelection = (0, import_react2.useRef)(null);\n  (0, import_react2.useEffect)(function() {\n    if (!text) setRevealed(false);\n  }, [\n    text\n  ]);\n  (0, import_react2.useLayoutEffect)(function() {\n    var selection = pendingSelection.current;\n    if (!selection) return;\n    pendingSelection.current = null;\n    var el = domInput(inputRef.current, id);\n    el === null || el === void 0 ? void 0 : el.focus();\n    el === null || el === void 0 ? void 0 : el.setSelectionRange(selection.start, selection.end);\n  }, [\n    id,\n    inputRef,\n    revealed\n  ]);\n  var toggle = (0, import_react2.useCallback)(function() {\n    pendingSelection.current = readSelection(inputRef.current, id);\n    setRevealed(function(open) {\n      return !open;\n    });\n  }, [\n    id,\n    inputRef\n  ]);\n  return {\n    revealed,\n    toggle\n  };\n}\nfunction PasswordReveal(param) {\n  var { revealed, onToggle, controls, disabled, size } = param;\n  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_index.Input.Action, {\n    label: revealed ? HIDE_PASSWORD : SHOW_PASSWORD,\n    pressed: revealed,\n    controls,\n    disabled,\n    size,\n    onPress: onToggle,\n    children: revealed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.EyeSlashIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.EyeIcon, {})\n  });\n}\n//# sourceMappingURL=PasswordReveal.js.map\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/InputParts/index.cjs

@@ -22,6 +22,7 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var InputParts_exports = {};
 __export(InputParts_exports, {
+  FieldTrailingOverlay: () => FieldTrailingOverlay,
   FocusContext: () => FocusContext,
   FocusWiredTextArea: () => FocusWiredTextArea,
   INPUT_MODE_TO_KEYBOARD: () => INPUT_MODE_TO_KEYBOARD,
@@ -51,6 +52,7 @@ var import_theme2 = require("@multiplatform.one/theme");
 var import_colorRamps = require("../shared/colorRamps.cjs");
 var import_groupContext = require("../shared/groupContext.cjs");
 var import_nativeAutoFocus = require("../shared/nativeAutoFocus.cjs");
+var import_pressSlopProps = require("../shared/pressSlopProps.cjs");
 var import_tableCellContext = require("../shared/tableCellContext.cjs");
 var import_fieldLayout = require("../fieldLayout.cjs");
 var import_themedPrimitives = require("../themedPrimitives.cjs");
@@ -239,6 +241,16 @@ const InputGroupFrame = (0, import_tamagui.styled)(import_tamagui.XGroup, {
     unstyled: process.env.TAMAGUI_HEADLESS === "1"
   }
 });
+const FieldTrailingOverlayContext = (0, import_react.createContext)(false);
+function FieldTrailingOverlay({
+  active,
+  children
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FieldTrailingOverlayContext.Provider, {
+    value: active,
+    children
+  });
+}
 function wrapNativePressable(onPress, disabled, node) {
   if (import_tamagui.isWeb || !onPress) return node;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Pressable, {
@@ -344,11 +356,22 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
   const insetPadProps = sizeRecipeEscaped || typeof paddingHorizontalProp !== "number" && paddingHorizontalProp != null ? void 0 : {
     paddingHorizontal: fieldInset
   };
+  const trailingOverlay = (0, import_react.useContext)(FieldTrailingOverlayContext);
+  const trailingSlot = trailingOverlay ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    "aria-hidden": true,
+    "data-field-action-slot": "",
+    width: familyRecipe.height,
+    flexShrink: 0,
+    pointerEvents: "none"
+  }) : null;
+  const trailingPadProps = trailingOverlay ? {
+    paddingInlineEnd: 0
+  } : void 0;
   if (inTableCell) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FocusContext.Provider, {
       focused,
       setFocused,
-      children: wrapNativePressable(onPress, disabled, /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputGroupFrame, {
+      children: wrapNativePressable(onPress, disabled, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(InputGroupFrame, {
         touch: hydrationTouch,
         ref: forwardedRef,
         borderWidth: 0,
@@ -364,11 +387,12 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
         ...controlFragment,
         ...passthroughSizeProps,
         ...insetPadProps,
+        ...trailingPadProps,
         ...sizeRecipeEscapeOverride,
         ...framePressProps,
         ...boxRingAttrs,
         overflow: boxOverflow,
-        children
+        children: [children, trailingSlot]
       }))
     });
   }
@@ -394,7 +418,7 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FocusContext.Provider, {
     focused,
     setFocused,
-    children: wrapNativePressable(onPress, disabled, /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputGroupFrame, {
+    children: wrapNativePressable(onPress, disabled, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(InputGroupFrame, {
       touch: hydrationTouch,
       ref: forwardedRef,
       ...knobProps.body,
@@ -419,6 +443,7 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
       ...props,
       ...passthroughSizeProps,
       ...insetPadProps,
+      ...trailingPadProps,
       ...sizeRecipeEscapeOverride,
       ...framePressProps,
       ...boxRingAttrs,
@@ -430,7 +455,7 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
         }
       } : void 0),
       overflow: boxOverflow,
-      children
+      children: [children, trailingSlot]
     }))
   });
 });
@@ -756,7 +781,8 @@ const InputButtonImpl = InputButton.styleable((buttonProps, ref) => {
     if (typeof ref === "function") ref(node);else if (ref) ref.current = node;
   }, [ref, tabIndexProp]);
   if (glyphRing) {
-    const square2 = (0, import_theme2.sizeRecipeForToken)(String(size ?? "$true"), {
+    const measured = props.height;
+    const square2 = typeof measured === "number" ? measured : (0, import_theme2.sizeRecipeForToken)(String(size ?? "$true"), {
       touch: hydrationTouch
     }).height;
     const disabled = props.disabled === true;
@@ -800,6 +826,69 @@ const InputButtonImpl = InputButton.styleable((buttonProps, ref) => {
     children: textChild ?? getThemedIcon(children)
   });
 });
+const InputActionImpl = (0, import_react.forwardRef)(function InputAction({
+  label,
+  onPress,
+  disabled,
+  pressed,
+  controls,
+  size,
+  height,
+  tabIndex,
+  children,
+  ...rest
+}, ref) {
+  const {
+    size: contextSize
+  } = InputContext.useStyledContext();
+  const hydrationTouch = (0, import_theme2.useTouchSurface)();
+  const token = size ?? contextSize ?? "$true";
+  const square = height ?? (0, import_theme2.sizeRecipeForToken)(String(token), {
+    touch: hydrationTouch
+  }).height;
+  const activate = () => {
+    if (!disabled) onPress?.();
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputButtonImpl, {
+    ref,
+    glyphRing: true,
+    size: token,
+    disabled,
+    tabIndex,
+    "aria-label": label,
+    accessibilityLabel: label,
+    accessibilityRole: "button",
+    accessibilityState: {
+      disabled: !!disabled
+    },
+    ...(import_tamagui.isWeb && pressed !== void 0 ? {
+      "aria-pressed": pressed
+    } : void 0),
+    ...(controls ? {
+      "aria-controls": controls
+    } : void 0),
+    height: square,
+    width: square,
+    ...(0, import_pressSlopProps.pressSlopProps)(square, true),
+    "data-field-action": "trailing",
+    onPress: disabled ? void 0 : e => {
+      e?.stopPropagation?.();
+      activate();
+    },
+    onKeyDown: e => {
+      if (e.key !== "Enter" && e.key !== " ") return;
+      e.preventDefault();
+      e.stopPropagation();
+      activate();
+    },
+    ...rest,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputIcon, {
+      "aria-hidden": true,
+      color: import_colorRamps.formCommonColors.muted,
+      children
+    })
+  });
+});
 const InputIconFrame = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "InputIconFrame",
   justifyContent: "center",
@@ -1066,6 +1155,7 @@ const InputCompound = Object.assign(InputContainerImpl, {
   TextArea: FocusWiredTextArea,
   Section: InputSection,
   Button: InputButtonImpl,
+  Action: InputActionImpl,
   Icon: InputIcon,
   Info: InputInfo,
   Meta: InputFieldMeta,

package/dist/cjs/InputParts/index.native.js

@@ -24,6 +24,7 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var InputParts_exports = {};
 __export(InputParts_exports, {
+  FieldTrailingOverlay: () => FieldTrailingOverlay,
   FocusContext: () => FocusContext,
   FocusWiredTextArea: () => FocusWiredTextArea,
   INPUT_MODE_TO_KEYBOARD: () => INPUT_MODE_TO_KEYBOARD,
@@ -54,6 +55,7 @@ var import_theme2 = require("@multiplatform.one/theme");
 var import_colorRamps = require("../shared/colorRamps.native.js");
 var import_groupContext = require("../shared/groupContext.native.js");
 var import_nativeAutoFocus = require("../shared/nativeAutoFocus.native.js");
+var import_pressSlopProps = require("../shared/pressSlopProps.native.js");
 var import_tableCellContext = require("../shared/tableCellContext.native.js");
 var import_fieldLayout = require("../fieldLayout.native.js");
 var import_themedPrimitives = require("../themedPrimitives.native.js");
@@ -255,6 +257,17 @@ var InputGroupFrame = (0, import_tamagui.styled)(import_tamagui.XGroup, {
     unstyled: process.env.TAMAGUI_HEADLESS === "1"
   }
 });
+var FieldTrailingOverlayContext = /* @__PURE__ */(0, import_react.createContext)(false);
+function FieldTrailingOverlay(param) {
+  var {
+    active,
+    children
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FieldTrailingOverlayContext.Provider, {
+    value: active,
+    children
+  });
+}
 function wrapNativePressable(onPress, disabled, node) {
   if (import_tamagui.isWeb || !onPress) return node;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Pressable, {
@@ -376,11 +389,22 @@ function (groupProps, forwardedRef) {
   var insetPadProps = sizeRecipeEscaped || typeof paddingHorizontalProp !== "number" && paddingHorizontalProp != null ? void 0 : {
     paddingHorizontal: fieldInset
   };
+  var trailingOverlay = (0, import_react.useContext)(FieldTrailingOverlayContext);
+  var trailingSlot = trailingOverlay ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    "aria-hidden": true,
+    "data-field-action-slot": "",
+    width: familyRecipe.height,
+    flexShrink: 0,
+    pointerEvents: "none"
+  }) : null;
+  var trailingPadProps = trailingOverlay ? {
+    paddingInlineEnd: 0
+  } : void 0;
   if (inTableCell) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FocusContext.Provider, {
       focused,
       setFocused: setFocused2,
-      children: wrapNativePressable(onPress, disabled, /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputGroupFrame, {
+      children: wrapNativePressable(onPress, disabled, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(InputGroupFrame, {
         touch: hydrationTouch,
         ref: forwardedRef,
         borderWidth: 0,
@@ -404,11 +428,12 @@ function (groupProps, forwardedRef) {
         ...controlFragment,
         ...passthroughSizeProps,
         ...insetPadProps,
+        ...trailingPadProps,
         ...sizeRecipeEscapeOverride,
         ...framePressProps,
         ...boxRingAttrs,
         overflow: boxOverflow,
-        children
+        children: [children, trailingSlot]
       }))
     });
   }
@@ -434,7 +459,7 @@ function (groupProps, forwardedRef) {
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FocusContext.Provider, {
     focused,
     setFocused: setFocused2,
-    children: wrapNativePressable(onPress, disabled, /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputGroupFrame, {
+    children: wrapNativePressable(onPress, disabled, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(InputGroupFrame, {
       touch: hydrationTouch,
       ref: forwardedRef,
       ...knobProps.body,
@@ -459,6 +484,7 @@ function (groupProps, forwardedRef) {
       ...props,
       ...passthroughSizeProps,
       ...insetPadProps,
+      ...trailingPadProps,
       ...sizeRecipeEscapeOverride,
       ...framePressProps,
       ...boxRingAttrs,
@@ -474,7 +500,7 @@ function (groupProps, forwardedRef) {
         }
       } : void 0),
       overflow: boxOverflow,
-      children
+      children: [children, trailingSlot]
     }))
   });
 });
@@ -808,7 +834,8 @@ var InputButtonImpl = InputButton.styleable(function (buttonProps, ref) {
     if (typeof ref === "function") ref(node);else if (ref) ref.current = node;
   }, [ref, tabIndexProp]);
   if (glyphRing) {
-    var square = (0, import_theme2.sizeRecipeForToken)(String(size !== null && size !== void 0 ? size : "$true"), {
+    var measured = props.height;
+    var square = typeof measured === "number" ? measured : (0, import_theme2.sizeRecipeForToken)(String(size !== null && size !== void 0 ? size : "$true"), {
       touch: hydrationTouch
     }).height;
     var disabled = props.disabled === true;
@@ -856,6 +883,72 @@ var InputButtonImpl = InputButton.styleable(function (buttonProps, ref) {
     children: textChild !== null && textChild !== void 0 ? textChild : getThemedIcon(children)
   });
 });
+var InputActionImpl = /* @__PURE__ */(0, import_react.forwardRef)(function InputAction(param, ref) {
+  var {
+    label,
+    onPress,
+    disabled,
+    pressed,
+    controls,
+    size,
+    height,
+    tabIndex,
+    children,
+    ...rest
+  } = param;
+  var _ref;
+  var {
+    size: contextSize
+  } = InputContext.useStyledContext();
+  var hydrationTouch = (0, import_theme2.useTouchSurface)();
+  var token = (_ref = size !== null && size !== void 0 ? size : contextSize) !== null && _ref !== void 0 ? _ref : "$true";
+  var square = height !== null && height !== void 0 ? height : (0, import_theme2.sizeRecipeForToken)(String(token), {
+    touch: hydrationTouch
+  }).height;
+  var activate = function activate2() {
+    if (!disabled) onPress === null || onPress === void 0 ? void 0 : onPress();
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputButtonImpl, {
+    ref,
+    glyphRing: true,
+    size: token,
+    disabled,
+    tabIndex,
+    "aria-label": label,
+    accessibilityLabel: label,
+    accessibilityRole: "button",
+    accessibilityState: {
+      disabled: !!disabled
+    },
+    ...(import_tamagui.isWeb && pressed !== void 0 ? {
+      "aria-pressed": pressed
+    } : void 0),
+    ...(controls ? {
+      "aria-controls": controls
+    } : void 0),
+    height: square,
+    width: square,
+    ...(0, import_pressSlopProps.pressSlopProps)(square, true),
+    "data-field-action": "trailing",
+    onPress: disabled ? void 0 : function (e) {
+      var _e_stopPropagation;
+      e === null || e === void 0 ? void 0 : (_e_stopPropagation = e.stopPropagation) === null || _e_stopPropagation === void 0 ? void 0 : _e_stopPropagation.call(e);
+      activate();
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (e.key !== "Enter" && e.key !== " ") return;
+      e.preventDefault();
+      e.stopPropagation();
+      activate();
+    },
+    ...rest,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputIcon, {
+      "aria-hidden": true,
+      color: import_colorRamps.formCommonColors.muted,
+      children
+    })
+  });
+});
 var InputIconFrame = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "InputIconFrame",
   justifyContent: "center",
@@ -1135,6 +1228,7 @@ var InputCompound = Object.assign(InputContainerImpl, {
   TextArea: FocusWiredTextArea,
   Section: InputSection,
   Button: InputButtonImpl,
+  Action: InputActionImpl,
   Icon: InputIcon,
   Info: InputInfo,
   Meta: InputFieldMeta,