@multiplatform.one/frappe-ui 7.23.2 → 7.24.0

package/dist/cjs/list/FacetRail.cjs

@@ -0,0 +1,199 @@
+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 FacetRail_exports = {};
+__export(FacetRail_exports, {
+  FacetRail: () => FacetRail
+});
+module.exports = __toCommonJS(FacetRail_exports);
+var import_components = require("@multiplatform.one/components");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+const chipVisualHeight = 38;
+const chipHitSlop = (0, import_theme.pressTargetHitSlop)(chipVisualHeight);
+const pipSize = "$1";
+function RailChip({
+  option,
+  selected,
+  tabStop,
+  onPress,
+  onFocusChip,
+  onBlurChip,
+  onMove,
+  testID,
+  register
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const [kbFocus, setKbFocus] = (0, import_react.useState)(false);
+  if (import_components.isWeb) (0, import_theme.ensureKeyboardModalityTracking)();
+  const hue = option.tint;
+  const fill = selected ? hue ? `$${hue}5` : "$color5" : hue ? `$${hue}3` : "$color3";
+  const hoverFill = selected ? fill : hue ? `$${hue}4` : "$color4";
+  const textColor = selected ? hue ? `$${hue}12` : "$color12" : hue ? `$${hue}11` : "$color11";
+  const keys = {
+    ArrowRight: 1,
+    ArrowLeft: -1,
+    Home: "home",
+    End: "end"
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+    ref: register,
+    ...knobProps.borderRadius,
+    backgroundColor: fill,
+    borderWidth: 0,
+    paddingHorizontal: "$3",
+    minHeight: chipVisualHeight,
+    hitSlop: chipHitSlop,
+    alignItems: "center",
+    gap: "$1.5",
+    cursor: "pointer",
+    role: "radio",
+    "aria-checked": selected,
+    ...(import_components.isWeb ? {
+      tabIndex: tabStop ? 0 : -1
+    } : void 0),
+    ...(0, import_theme.transitionProps)(knobProps.transition),
+    hoverStyle: {
+      backgroundColor: hoverFill
+    },
+    pressStyle: {
+      backgroundColor: fill
+    },
+    outlineWidth: 0,
+    focusStyle: {
+      outlineWidth: 0,
+      backgroundColor: fill
+    },
+    focusVisibleStyle: {
+      outlineWidth: 0
+    },
+    ...(import_components.isWeb ? {
+      onFocus: () => {
+        onFocusChip();
+        if ((0, import_theme.wasKeyboardFocus)()) setKbFocus(true);
+      },
+      onBlur: () => {
+        onBlurChip();
+        setKbFocus(false);
+      },
+      onKeyDown: event => {
+        const direction = event.key ? keys[event.key] : void 0;
+        if (direction !== void 0) {
+          event.preventDefault?.();
+          onMove(direction);
+          return;
+        }
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault?.();
+          onPress();
+        }
+      }
+    } : void 0),
+    ...(kbFocus ? import_theme.keyboardFocusRingProps : void 0),
+    onPress,
+    testID,
+    children: [hue ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+      width: pipSize,
+      height: pipSize,
+      borderRadius: 1e3,
+      backgroundColor: `$${hue}9`,
+      flexShrink: 0
+    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+      ...knobProps.label,
+      fontWeight: selected ? "700" : "500",
+      color: textColor,
+      textTransform: "capitalize",
+      userSelect: "none",
+      children: option.label
+    }), typeof option.count === "number" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+      ...knobProps.label,
+      fontSize: "$1",
+      fontWeight: "700",
+      color: textColor,
+      opacity: 0.7,
+      userSelect: "none",
+      children: option.count
+    }) : null]
+  });
+}
+function FacetRail({
+  label,
+  value,
+  options,
+  onChange,
+  testID
+}) {
+  const itemRefs = (0, import_react.useRef)({});
+  const [focusValue, setFocusValue] = (0, import_react.useState)(null);
+  if (import_components.isWeb) (0, import_theme.ensureKeyboardModalityTracking)();
+  const anchor = focusValue !== null && options.some(option => option.value === focusValue) ? focusValue : value;
+  const focusAndSelect = next => {
+    setFocusValue(next);
+    onChange(next);
+    if (!import_components.isWeb) return;
+    requestAnimationFrame(() => {
+      const node = itemRefs.current[next];
+      node?.focus?.();
+      node?.scrollIntoView?.({
+        inline: "nearest",
+        block: "nearest"
+      });
+    });
+  };
+  const moveFrom = (from, direction) => {
+    if (options.length === 0) return;
+    if (direction === "home") return focusAndSelect(options[0].value);
+    if (direction === "end") return focusAndSelect(options[options.length - 1].value);
+    const index = Math.max(0, options.findIndex(option => option.value === from));
+    focusAndSelect(options[(index + direction + options.length) % options.length].value);
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ScrollView, {
+    horizontal: true,
+    showsHorizontalScrollIndicator: false,
+    flexShrink: 0,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+      role: "radiogroup",
+      "aria-label": label,
+      "aria-orientation": "horizontal",
+      gap: "$1.5",
+      alignItems: "center",
+      paddingVertical: "$1",
+      testID,
+      children: options.map(option => /* @__PURE__ */(0, import_jsx_runtime.jsx)(RailChip, {
+        option,
+        selected: option.value === value,
+        tabStop: option.value === anchor,
+        onPress: () => onChange(option.value === value && option.value !== "" ? "" : option.value),
+        onFocusChip: () => setFocusValue(option.value),
+        onBlurChip: () => setFocusValue(prev => prev === option.value ? null : prev),
+        onMove: direction => moveFrom(option.value, direction),
+        testID: testID ? `${testID}-${option.value || "all"}` : void 0,
+        register: node => {
+          itemRefs.current[option.value] = node;
+        }
+      }, option.value || "__all"))
+    })
+  });
+}

package/dist/cjs/list/FacetRail.native.js

@@ -0,0 +1,223 @@
+"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 FacetRail_exports = {};
+__export(FacetRail_exports, {
+  FacetRail: () => FacetRail
+});
+module.exports = __toCommonJS(FacetRail_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@multiplatform.one/components");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+var chipVisualHeight = 38;
+var chipHitSlop = (0, import_theme.pressTargetHitSlop)(chipVisualHeight);
+var pipSize = "$1";
+function RailChip(param) {
+  var {
+    option,
+    selected,
+    tabStop,
+    onPress,
+    onFocusChip,
+    onBlurChip,
+    onMove,
+    testID,
+    register
+  } = param;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var [kbFocus, setKbFocus] = (0, import_react.useState)(false);
+  if (import_components.isWeb) (0, import_theme.ensureKeyboardModalityTracking)();
+  var hue = option.tint;
+  var fill = selected ? hue ? `$${hue}5` : "$color5" : hue ? `$${hue}3` : "$color3";
+  var hoverFill = selected ? fill : hue ? `$${hue}4` : "$color4";
+  var textColor = selected ? hue ? `$${hue}12` : "$color12" : hue ? `$${hue}11` : "$color11";
+  var keys = {
+    ArrowRight: 1,
+    ArrowLeft: -1,
+    Home: "home",
+    End: "end"
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+    ref: register,
+    ...knobProps.borderRadius,
+    backgroundColor: fill,
+    borderWidth: 0,
+    paddingHorizontal: "$3",
+    minHeight: chipVisualHeight,
+    hitSlop: chipHitSlop,
+    alignItems: "center",
+    gap: "$1.5",
+    cursor: "pointer",
+    role: "radio",
+    "aria-checked": selected,
+    ...(import_components.isWeb ? {
+      tabIndex: tabStop ? 0 : -1
+    } : void 0),
+    ...(0, import_theme.transitionProps)(knobProps.transition),
+    hoverStyle: {
+      backgroundColor: hoverFill
+    },
+    pressStyle: {
+      backgroundColor: fill
+    },
+    outlineWidth: 0,
+    focusStyle: {
+      outlineWidth: 0,
+      backgroundColor: fill
+    },
+    focusVisibleStyle: {
+      outlineWidth: 0
+    },
+    ...(import_components.isWeb ? {
+      onFocus: function onFocus() {
+        onFocusChip();
+        if ((0, import_theme.wasKeyboardFocus)()) setKbFocus(true);
+      },
+      onBlur: function onBlur() {
+        onBlurChip();
+        setKbFocus(false);
+      },
+      onKeyDown: function onKeyDown(event) {
+        var direction = event.key ? keys[event.key] : void 0;
+        if (direction !== void 0) {
+          var _event_preventDefault;
+          (_event_preventDefault = event.preventDefault) === null || _event_preventDefault === void 0 ? void 0 : _event_preventDefault.call(event);
+          onMove(direction);
+          return;
+        }
+        if (event.key === "Enter" || event.key === " ") {
+          var _event_preventDefault1;
+          (_event_preventDefault1 = event.preventDefault) === null || _event_preventDefault1 === void 0 ? void 0 : _event_preventDefault1.call(event);
+          onPress();
+        }
+      }
+    } : void 0),
+    ...(kbFocus ? import_theme.keyboardFocusRingProps : void 0),
+    onPress,
+    testID,
+    children: [hue ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+      width: pipSize,
+      height: pipSize,
+      borderRadius: 1e3,
+      backgroundColor: `$${hue}9`,
+      flexShrink: 0
+    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+      ...knobProps.label,
+      fontWeight: selected ? "700" : "500",
+      color: textColor,
+      textTransform: "capitalize",
+      userSelect: "none",
+      children: option.label
+    }), typeof option.count === "number" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+      ...knobProps.label,
+      fontSize: "$1",
+      fontWeight: "700",
+      color: textColor,
+      opacity: 0.7,
+      userSelect: "none",
+      children: option.count
+    }) : null]
+  });
+}
+function FacetRail(param) {
+  var {
+    label,
+    value,
+    options,
+    onChange,
+    testID
+  } = param;
+  var itemRefs = (0, import_react.useRef)({});
+  var [focusValue, setFocusValue] = (0, import_react.useState)(null);
+  if (import_components.isWeb) (0, import_theme.ensureKeyboardModalityTracking)();
+  var anchor = focusValue !== null && options.some(function (option) {
+    return option.value === focusValue;
+  }) ? focusValue : value;
+  var focusAndSelect = function focusAndSelect2(next) {
+    setFocusValue(next);
+    onChange(next);
+    if (!import_components.isWeb) return;
+    requestAnimationFrame(function () {
+      var _node_focus, _node_scrollIntoView;
+      var node = itemRefs.current[next];
+      node === null || node === void 0 ? void 0 : (_node_focus = node.focus) === null || _node_focus === void 0 ? void 0 : _node_focus.call(node);
+      node === null || node === void 0 ? void 0 : (_node_scrollIntoView = node.scrollIntoView) === null || _node_scrollIntoView === void 0 ? void 0 : _node_scrollIntoView.call(node, {
+        inline: "nearest",
+        block: "nearest"
+      });
+    });
+  };
+  var moveFrom = function moveFrom2(from, direction) {
+    if (options.length === 0) return;
+    if (direction === "home") return focusAndSelect(options[0].value);
+    if (direction === "end") return focusAndSelect(options[options.length - 1].value);
+    var index = Math.max(0, options.findIndex(function (option) {
+      return option.value === from;
+    }));
+    focusAndSelect(options[(index + direction + options.length) % options.length].value);
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ScrollView, {
+    horizontal: true,
+    showsHorizontalScrollIndicator: false,
+    flexShrink: 0,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+      role: "radiogroup",
+      "aria-label": label,
+      "aria-orientation": "horizontal",
+      gap: "$1.5",
+      alignItems: "center",
+      paddingVertical: "$1",
+      testID,
+      children: options.map(function (option) {
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(RailChip, {
+          option,
+          selected: option.value === value,
+          tabStop: option.value === anchor,
+          onPress: function onPress() {
+            return onChange(option.value === value && option.value !== "" ? "" : option.value);
+          },
+          onFocusChip: function onFocusChip() {
+            return setFocusValue(option.value);
+          },
+          onBlurChip: function onBlurChip() {
+            return setFocusValue(function (prev) {
+              return prev === option.value ? null : prev;
+            });
+          },
+          onMove: function onMove(direction) {
+            return moveFrom(option.value, direction);
+          },
+          testID: testID ? `${testID}-${option.value || "all"}` : void 0,
+          register: function register(node) {
+            itemRefs.current[option.value] = node;
+          }
+        }, option.value || "__all");
+      })
+    })
+  });
+}
+//# sourceMappingURL=FacetRail.native.js.map

package/dist/cjs/list/FacetRail.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","FacetRail_exports","__export","FacetRail","module","exports","import_jsx_runtime","require","import_components","import_theme","import_react","chipVisualHeight","chipHitSlop","pressTargetHitSlop","pipSize","RailChip","param","option","selected","tabStop","onPress","onFocusChip","onBlurChip","onMove","testID","register","knobProps","useResolvedKnobs","kbFocus","setKbFocus","useState","isWeb","ensureKeyboardModalityTracking","hue","tint","fill","hoverFill","textColor","keys","ArrowRight","ArrowLeft","Home","End","jsxs","XStack","ref","borderRadius","backgroundColor","borderWidth","paddingHorizontal","minHeight","hitSlop","alignItems","gap","cursor","role","tabIndex","transitionProps","transition","hoverStyle","pressStyle","outlineWidth","focusStyle","focusVisibleStyle","onFocus","wasKeyboardFocus","onBlur","onKeyDown","event","direction","key","_event_preventDefault","preventDefault","call","_event_preventDefault1","keyboardFocusRingProps","children","jsx","width","height","flexShrink","Text","label","fontWeight","color","textTransform","userSelect","count","fontSize","opacity","options","onChange","itemRefs","useRef","focusValue","setFocusValue","anchor","some","focusAndSelect","focusAndSelect2","next","requestAnimationFrame","_node_focus","_node_scrollIntoView","node","current","focus","scrollIntoView","inline","block","moveFrom","moveFrom2","from","length","index","Math","max","findIndex","ScrollView","horizontal","showsHorizontalScrollIndicator","paddingVertical","map","prev"],"sources":["../../../src/list/FacetRail.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/list/ImageWell.cjs

@@ -0,0 +1,111 @@
+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 ImageWell_exports = {};
+__export(ImageWell_exports, {
+  ImageWell: () => ImageWell
+});
+module.exports = __toCommonJS(ImageWell_exports);
+var import_components = require("@multiplatform.one/components");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function ImageWell({
+  sources,
+  alt,
+  tints,
+  pixelated = false,
+  inset = 0.06,
+  lazy = false,
+  ...wellProps
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const [sourceIndex, setSourceIndex] = (0, import_react.useState)(0);
+  const [revealedSrc, setRevealedSrc] = (0, import_react.useState)(null);
+  const hue = tints?.[0] ?? "gray";
+  const secondHue = tints?.[1];
+  const sourceKey = sources.join("|");
+  (0, import_react.useEffect)(() => {
+    setSourceIndex(0);
+  }, [sourceKey]);
+  const src = sources[sourceIndex] ?? "";
+  const revealed = !import_components.isWeb || !src || revealedSrc === src;
+  (0, import_react.useEffect)(() => {
+    if (!import_components.isWeb || !src || revealedSrc === src) return;
+    const timer = setTimeout(() => setRevealedSrc(src), 350);
+    return () => clearTimeout(timer);
+  }, [src, revealedSrc]);
+  const imageSize = `${Math.round((1 - inset * 2) * 100)}%`;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+    ...knobProps.borderRadius,
+    borderWidth: 0,
+    backgroundColor: secondHue ? "transparent" : `$${hue}5`,
+    aspectRatio: 1,
+    width: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    position: "relative",
+    ...wellProps,
+    children: [secondHue ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      fullscreen: true,
+      zIndex: 0,
+      pointerEvents: "none",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        flex: 1,
+        backgroundColor: `$${hue}5`
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        flex: 1,
+        backgroundColor: `$${secondHue}5`
+      })]
+    }) : null, src ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Image, {
+      src,
+      alt,
+      width: imageSize,
+      height: imageSize,
+      objectFit: "contain",
+      opacity: revealed ? 1 : 0,
+      transition: knobProps.transition,
+      zIndex: 1,
+      ...(import_components.isWeb ? {
+        loading: lazy ? "lazy" : "eager",
+        decoding: "async"
+      } : void 0),
+      ...(pixelated && import_components.isWeb ? {
+        style: {
+          imageRendering: "pixelated"
+        }
+      } : null),
+      onLoad: () => setRevealedSrc(src),
+      onError: () => setSourceIndex(index => index + 1)
+    }, src) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+      fontSize: "$10",
+      color: `$${hue}8`,
+      fontWeight: "700",
+      "aria-hidden": true,
+      zIndex: 1,
+      children: "?"
+    })]
+  });
+}

package/dist/cjs/list/ImageWell.native.js

@@ -0,0 +1,126 @@
+"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 ImageWell_exports = {};
+__export(ImageWell_exports, {
+  ImageWell: () => ImageWell
+});
+module.exports = __toCommonJS(ImageWell_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@multiplatform.one/components");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+function ImageWell(param) {
+  var {
+    sources,
+    alt,
+    tints,
+    pixelated = false,
+    inset = 0.06,
+    lazy = false,
+    ...wellProps
+  } = param;
+  var _ref, _sources_sourceIndex;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var [sourceIndex, setSourceIndex] = (0, import_react.useState)(0);
+  var [revealedSrc, setRevealedSrc] = (0, import_react.useState)(null);
+  var hue = (_ref = tints === null || tints === void 0 ? void 0 : tints[0]) !== null && _ref !== void 0 ? _ref : "gray";
+  var secondHue = tints === null || tints === void 0 ? void 0 : tints[1];
+  var sourceKey = sources.join("|");
+  (0, import_react.useEffect)(function () {
+    setSourceIndex(0);
+  }, [sourceKey]);
+  var src = (_sources_sourceIndex = sources[sourceIndex]) !== null && _sources_sourceIndex !== void 0 ? _sources_sourceIndex : "";
+  var revealed = !import_components.isWeb || !src || revealedSrc === src;
+  (0, import_react.useEffect)(function () {
+    if (!import_components.isWeb || !src || revealedSrc === src) return;
+    var timer = setTimeout(function () {
+      return setRevealedSrc(src);
+    }, 350);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [src, revealedSrc]);
+  var imageSize = `${Math.round((1 - inset * 2) * 100)}%`;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+    ...knobProps.borderRadius,
+    borderWidth: 0,
+    backgroundColor: secondHue ? "transparent" : `$${hue}5`,
+    aspectRatio: 1,
+    width: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    position: "relative",
+    ...wellProps,
+    children: [secondHue ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      fullscreen: true,
+      zIndex: 0,
+      pointerEvents: "none",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        flex: 1,
+        backgroundColor: `$${hue}5`
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        flex: 1,
+        backgroundColor: `$${secondHue}5`
+      })]
+    }) : null, src ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Image, {
+      src,
+      alt,
+      width: imageSize,
+      height: imageSize,
+      objectFit: "contain",
+      opacity: revealed ? 1 : 0,
+      transition: knobProps.transition,
+      zIndex: 1,
+      ...(import_components.isWeb ? {
+        loading: lazy ? "lazy" : "eager",
+        decoding: "async"
+      } : void 0),
+      ...(pixelated && import_components.isWeb ? {
+        style: {
+          imageRendering: "pixelated"
+        }
+      } : null),
+      onLoad: function onLoad() {
+        return setRevealedSrc(src);
+      },
+      onError: function onError() {
+        return setSourceIndex(function (index) {
+          return index + 1;
+        });
+      }
+    }, src) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+      fontSize: "$10",
+      color: `$${hue}8`,
+      fontWeight: "700",
+      "aria-hidden": true,
+      zIndex: 1,
+      children: "?"
+    })]
+  });
+}
+//# sourceMappingURL=ImageWell.native.js.map

package/dist/cjs/list/ImageWell.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","ImageWell_exports","__export","ImageWell","module","exports","import_jsx_runtime","require","import_components","import_theme","import_react","param","sources","alt","tints","pixelated","inset","lazy","wellProps","_ref","_sources_sourceIndex","knobProps","useResolvedKnobs","sourceIndex","setSourceIndex","useState","revealedSrc","setRevealedSrc","hue","secondHue","sourceKey","join","useEffect","src","revealed","isWeb","timer","setTimeout","clearTimeout","imageSize","Math","round","jsxs","YStack","borderRadius","borderWidth","backgroundColor","aspectRatio","width","alignItems","justifyContent","overflow","position","children","XStack","fullscreen","zIndex","pointerEvents","jsx","flex","Image","height","objectFit","opacity","transition"],"sources":["../../../src/list/ImageWell.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}