react-native-system-ui 1.0.2 → 1.0.3

package/dist/cjs/components/image/Image.js

@@ -1,263 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-function _react() {
-  const data = _interopRequireWildcard(require("react"));
-  _react = function () {
-    return data;
-  };
-  return data;
-}
-function _reactNative() {
-  const data = require("react-native");
-  _reactNative = function () {
-    return data;
-  };
-  return data;
-}
-function _reactNativeSvg() {
-  const data = require("react-native-svg");
-  _reactNativeSvg = function () {
-    return data;
-  };
-  return data;
-}
-var _utils = require("../../utils");
-var _validate = require("../../utils/validate");
-var _useLocale = require("../config-provider/useLocale");
-var _tokens = require("./tokens");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const resolveFitMode = fit => {
-  switch (fit) {
-    case 'fill':
-      return 'stretch';
-    case 'scale-down':
-      return 'contain';
-    case 'none':
-      return 'center';
-    default:
-      return fit;
-  }
-};
-const LAYOUT_STYLE_KEYS = new Set(['width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 'flex', 'flexGrow', 'flexShrink', 'flexBasis', 'alignSelf', 'aspectRatio', 'position', 'top', 'right', 'bottom', 'left', 'start', 'end', 'opacity', 'borderRadius']);
-const isLayoutStyleKey = key => LAYOUT_STYLE_KEYS.has(key) || key === 'backgroundColor' || key.startsWith('margin') || key.startsWith('padding') || key.startsWith('border') || key.endsWith('Radius');
-const splitImageStyle = style => {
-  if (!style) return {
-    container: undefined,
-    image: undefined
-  };
-  const flattened = _reactNative().StyleSheet.flatten(style) ?? {};
-  const flattenedRecord = flattened;
-  const container = {};
-  const image = {};
-  for (const key of Object.keys(flattenedRecord)) {
-    const value = flattenedRecord[key];
-    if (value === undefined) continue;
-    if (isLayoutStyleKey(key)) container[key] = value;else image[key] = value;
-  }
-  return {
-    container: Object.keys(container).length ? container : undefined,
-    image: Object.keys(image).length ? image : undefined
-  };
-};
-const PRESERVE_ASPECT_RATIO_MAP = {
-  contain: 'xMidYMid meet',
-  'scale-down': 'xMidYMid meet',
-  stretch: 'none',
-  fill: 'none',
-  none: 'xMidYMid meet',
-  center: 'xMidYMid meet'
-};
-const resolvePreserveAspectRatio = fit => PRESERVE_ASPECT_RATIO_MAP[fit] || 'xMidYMid slice';
-const WEB_IMAGE_STYLE = _reactNative().Platform.OS === 'web' ? {
-  height: 'revert-layer',
-  width: 'revert-layer'
-} : undefined;
-const resolveSourceUri = source => {
-  if (!source) return undefined;
-  if (typeof source === 'number') return undefined;
-  if (Array.isArray(source)) {
-    for (const item of source) {
-      if (item && typeof item === 'object' && 'uri' in item && typeof item.uri === 'string') return item.uri;
-    }
-    return undefined;
-  }
-  if (typeof source === 'object' && 'uri' in source && typeof source.uri === 'string') return source.uri;
-  return undefined;
-};
-const ImageImpl = (props, ref) => {
-  const {
-    src,
-    source,
-    width,
-    height,
-    radius,
-    round,
-    fit: fitP,
-    showLoading: showLoadP,
-    showError: showErrP,
-    loadingText: loadTxtP,
-    loadingIcon,
-    errorIcon,
-    iconSize: iconSzP,
-    loadingSize,
-    errorText: errTxtP,
-    fallback,
-    onPress,
-    alt,
-    accessibilityLabel,
-    ['aria-label']: ariaLabel,
-    containerStyle,
-    style,
-    children,
-    tokensOverride,
-    onLoad,
-    onError,
-    ...rest
-  } = props;
-  const locale = (0, _useLocale.useLocale)();
-  const tokens = (0, _tokens.useImageTokens)(tokensOverride);
-  const fit = fitP ?? tokens.defaults.fit;
-  const showLoading = showLoadP ?? tokens.defaults.showLoading;
-  const showError = showErrP ?? tokens.defaults.showError;
-  const loadingText = loadTxtP !== undefined ? loadTxtP : locale?.vanImage?.loading ?? tokens.defaults.loadingText;
-  const errorText = errTxtP !== undefined ? errTxtP : locale?.vanImage?.error ?? tokens.defaults.errorText;
-  const {
-    container: containerLayoutStyle,
-    image: imageStyleWithLayout
-  } = (0, _react().useMemo)(() => splitImageStyle(style), [style]);
-  const actualSource = (0, _react().useMemo)(() => source ? source : src ? {
-    uri: src
-  } : undefined, [source, src]);
-  const sourceKey = (0, _react().useMemo)(() => {
-    if (source) {
-      if (typeof source === 'number') return `res:${source}`;
-      const u = resolveSourceUri(source);
-      if (u) return `uri:${u}`;
-      return 'source:unknown';
-    }
-    ;
-    if (src) return `src:${src}`;
-    return 'none';
-  }, [source, src]);
-  const accLabel = alt ?? accessibilityLabel ?? ariaLabel;
-  const [state, setState] = (0, _react().useState)(() => actualSource ? 'loading' : 'idle');
-  (0, _react().useEffect)(() => {
-    setState(actualSource ? 'loading' : 'idle');
-  }, [sourceKey]);
-  const onLoadRef = (0, _react().useRef)(onLoad);
-  onLoadRef.current = onLoad;
-  const onErrorRef = (0, _react().useRef)(onError);
-  onErrorRef.current = onError;
-  const handleLoad = (0, _react().useCallback)(event => {
-    setState('loaded');
-    onLoadRef.current?.(event);
-  }, []);
-  const handleError = (0, _react().useCallback)(event => {
-    setState('error');
-    onErrorRef.current?.(event);
-  }, []);
-  const handleSvgLoad = (0, _react().useCallback)(() => {
-    handleLoad({
-      nativeEvent: {}
-    });
-  }, [handleLoad]);
-  const handleSvgError = (0, _react().useCallback)(err => {
-    handleError({
-      nativeEvent: {
-        error: err
-      }
-    });
-  }, [handleError]);
-  const uri = (0, _react().useMemo)(() => resolveSourceUri(actualSource), [actualSource]);
-  const normalizedUri = (0, _utils.isString)(uri) ? uri.toLowerCase() : undefined;
-  const isSvg = !!normalizedUri && (normalizedUri.endsWith('.svg') || normalizedUri.includes('.svg?') || normalizedUri.includes('/svg?'));
-  const rLoadSz = (0, _utils.isNumber)(loadingSize) ? loadingSize : tokens.defaults.loadingIndicatorBaseSize;
-  const rErrIconSz = iconSzP ?? tokens.defaults.iconSize;
-  const clickableRole = onPress ? 'button' : undefined;
-  const pressableProps = onPress ? {
-    onPress
-  } : null;
-  const renderLabel = (node, color, marginTop) => {
-    if (!(0, _validate.isRenderable)(node)) return null;
-    const textNode = (0, _utils.renderTextOrNode)(node, [tokens.layout.label, {
-      color: color
-    }, marginTop ? {
-      marginTop: marginTop
-    } : undefined].filter(Boolean));
-    return marginTop && !(0, _validate.isText)(node) ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: {
-        marginTop: marginTop
-      }
-    }, textNode) : textNode;
-  };
-  const computedContainerStyle = (0, _react().useMemo)(() => [tokens.layout.container, {
-    width: width,
-    height: height,
-    backgroundColor: tokens.colors.background
-  }, round ? {
-    borderRadius: tokens.defaults.roundRadius
-  } : (0, _utils.isNumber)(radius) ? {
-    borderRadius: radius
-  } : undefined, containerStyle, containerLayoutStyle], [containerLayoutStyle, containerStyle, height, radius, round, tokens.colors.background, tokens.defaults.roundRadius, tokens.layout.container, width]);
-  const imgAccLabel = !onPress ? accLabel : undefined;
-  const imageNode = actualSource ? isSvg && _reactNative().Platform.OS !== 'web' && uri ? /*#__PURE__*/_react().default.createElement(_reactNativeSvg().SvgUri, _extends({
-    width: "100%",
-    height: "100%",
-    uri: uri,
-    preserveAspectRatio: resolvePreserveAspectRatio(fit),
-    accessible: !onPress,
-    accessibilityLabel: imgAccLabel
-  }, rest, {
-    style: [tokens.layout.absoluteFill, imageStyleWithLayout],
-    onLoad: handleSvgLoad,
-    onError: handleSvgError
-  })) : /*#__PURE__*/_react().default.createElement(_reactNative().Image, _extends({
-    ref: ref,
-    accessible: !onPress,
-    accessibilityLabel: imgAccLabel
-  }, rest, {
-    source: actualSource,
-    style: [tokens.layout.absoluteFill, imageStyleWithLayout, WEB_IMAGE_STYLE],
-    resizeMode: resolveFitMode(fit),
-    onLoad: handleLoad,
-    onError: handleError
-  })) : null;
-  const content = /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, state === 'loading' && showLoading && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: tokens.layout.overlay,
-    pointerEvents: "none",
-    testID: "rv-image-loading"
-  }, loadingIcon || /*#__PURE__*/_react().default.createElement(_reactNative().ActivityIndicator, {
-    color: tokens.colors.text,
-    size: (0, _utils.isString)(loadingSize) ? loadingSize : 'small',
-    style: {
-      transform: [{
-        scale: rLoadSz / tokens.defaults.loadingIndicatorBaseSize
-      }]
-    }
-  }), renderLabel(loadingText, tokens.colors.text, tokens.defaults.loadingLabelMarginTop)), imageNode, state === 'error' && showError && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: tokens.layout.overlay,
-    pointerEvents: "none",
-    testID: "rv-image-error"
-  }, errorIcon && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [tokens.layout.iconContainer, {
-      width: rErrIconSz,
-      height: rErrIconSz
-    }]
-  }, errorIcon), (0, _validate.isRenderable)(fallback) ? renderLabel(fallback, tokens.colors.error) : renderLabel(errorText, tokens.colors.error)), children);
-  return pressableProps ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({}, pressableProps, {
-    accessibilityRole: clickableRole,
-    accessibilityLabel: accLabel,
-    style: computedContainerStyle
-  }), content) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    accessibilityLabel: accLabel,
-    style: computedContainerStyle
-  }, content);
-};
-const ImageForwardRef = /*#__PURE__*/_react().default.forwardRef(ImageImpl);
-const Image = /*#__PURE__*/_react().default.memo(ImageForwardRef);
-var _default = exports.default = Image;
+"use strict";function _react(){const e=_interopRequireWildcard(require("react"));return _react=function(){return e},e}function _reactNative(){const e=require("react-native");return _reactNative=function(){return e},e}function _reactNativeSvg(){const e=require("react-native-svg");return _reactNativeSvg=function(){return e},e}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _utils=require("../../utils"),_validate=require("../../utils/validate"),_useLocale=require("../config-provider/useLocale"),_tokens=require("./tokens");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,a=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var i,o,n={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return n;if(i=t?a:r){if(i.has(e))return i.get(e);i.set(e,n)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((o=(i=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(o.get||o.set)?i(n,t,o):n[t]=e[t]);return n})(e,t)}function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var a in r)({}).hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},_extends.apply(null,arguments)}const resolveFitMode=e=>{switch(e){case"fill":return"stretch";case"scale-down":return"contain";case"none":return"center";default:return e}},LAYOUT_STYLE_KEYS=new Set(["width","height","minWidth","minHeight","maxWidth","maxHeight","flex","flexGrow","flexShrink","flexBasis","alignSelf","aspectRatio","position","top","right","bottom","left","start","end","opacity","borderRadius"]),isLayoutStyleKey=e=>LAYOUT_STYLE_KEYS.has(e)||"backgroundColor"===e||e.startsWith("margin")||e.startsWith("padding")||e.startsWith("border")||e.endsWith("Radius"),splitImageStyle=e=>{if(!e)return{container:void 0,image:void 0};const t=_reactNative().StyleSheet.flatten(e)??{},r={},a={};for(const e of Object.keys(t)){const i=t[e];void 0!==i&&(isLayoutStyleKey(e)?r[e]=i:a[e]=i)}return{container:Object.keys(r).length?r:void 0,image:Object.keys(a).length?a:void 0}},PRESERVE_ASPECT_RATIO_MAP={contain:"xMidYMid meet","scale-down":"xMidYMid meet",stretch:"none",fill:"none",none:"xMidYMid meet",center:"xMidYMid meet"},resolvePreserveAspectRatio=e=>PRESERVE_ASPECT_RATIO_MAP[e]||"xMidYMid slice",WEB_IMAGE_STYLE="web"===_reactNative().Platform.OS?{height:"revert-layer",width:"revert-layer"}:void 0,resolveSourceUri=e=>{if(e&&"number"!=typeof e){if(!Array.isArray(e))return"object"==typeof e&&"uri"in e&&"string"==typeof e.uri?e.uri:void 0;for(const t of e)if(t&&"object"==typeof t&&"uri"in t&&"string"==typeof t.uri)return t.uri}},ImageImpl=(e,t)=>{const{src:r,source:a,width:i,height:o,radius:n,round:l,fit:s,showLoading:c,showError:u,loadingText:d,loadingIcon:f,errorIcon:_,iconSize:v,loadingSize:g,errorText:y,fallback:m,onPress:b,alt:p,accessibilityLabel:h,"aria-label":E,containerStyle:S,style:w,children:x,tokensOverride:M,onLoad:R,onError:I,...L}=e,k=(0,_useLocale.useLocale)(),T=(0,_tokens.useImageTokens)(M),N=s??T.defaults.fit,O=c??T.defaults.showLoading,P=u??T.defaults.showError,A=void 0!==d?d:k?.vanImage?.loading??T.defaults.loadingText,W=void 0!==y?y:k?.vanImage?.error??T.defaults.errorText,{container:Y,image:j}=(0,_react().useMemo)(()=>splitImageStyle(w),[w]),q=(0,_react().useMemo)(()=>a||(r?{uri:r}:void 0),[a,r]),C=(0,_react().useMemo)(()=>{if(a){if("number"==typeof a)return`res:${a}`;const e=resolveSourceUri(a);return e?`uri:${e}`:"source:unknown"}return r?`src:${r}`:"none"},[a,r]),z=p??h??E,[F,V]=(0,_react().useState)(()=>q?"loading":"idle");(0,_react().useEffect)(()=>{V(q?"loading":"idle")},[C]);const B=(0,_react().useRef)(R);B.current=R;const U=(0,_react().useRef)(I);U.current=I;const K=(0,_react().useCallback)(e=>{V("loaded"),B.current?.(e)},[]),D=(0,_react().useCallback)(e=>{V("error"),U.current?.(e)},[]),G=(0,_react().useCallback)(()=>{K({nativeEvent:{}})},[K]),$=(0,_react().useCallback)(e=>{D({nativeEvent:{error:e}})},[D]),H=(0,_react().useMemo)(()=>resolveSourceUri(q),[q]),J=(0,_utils.isString)(H)?H.toLowerCase():void 0,Q=!!J&&(J.endsWith(".svg")||J.includes(".svg?")||J.includes("/svg?")),X=(0,_utils.isNumber)(g)?g:T.defaults.loadingIndicatorBaseSize,Z=v??T.defaults.iconSize,ee=b?"button":void 0,te=b?{onPress:b}:null,re=(e,t,r)=>{if(!(0,_validate.isRenderable)(e))return null;const a=(0,_utils.renderTextOrNode)(e,[T.layout.label,{color:t},r?{marginTop:r}:void 0].filter(Boolean));return r&&!(0,_validate.isText)(e)?_react().default.createElement(_reactNative().View,{style:{marginTop:r}},a):a},ae=(0,_react().useMemo)(()=>[T.layout.container,{width:i,height:o,backgroundColor:T.colors.background},l?{borderRadius:T.defaults.roundRadius}:(0,_utils.isNumber)(n)?{borderRadius:n}:void 0,S,Y],[Y,S,o,n,l,T.colors.background,T.defaults.roundRadius,T.layout.container,i]),ie=b?void 0:z,oe=q?Q&&"web"!==_reactNative().Platform.OS&&H?_react().default.createElement(_reactNativeSvg().SvgUri,_extends({width:"100%",height:"100%",uri:H,preserveAspectRatio:resolvePreserveAspectRatio(N),accessible:!b,accessibilityLabel:ie},L,{style:[T.layout.absoluteFill,j],onLoad:G,onError:$})):_react().default.createElement(_reactNative().Image,_extends({ref:t,accessible:!b,accessibilityLabel:ie},L,{source:q,style:[T.layout.absoluteFill,j,WEB_IMAGE_STYLE],resizeMode:resolveFitMode(N),onLoad:K,onError:D})):null,ne=_react().default.createElement(_react().default.Fragment,null,"loading"===F&&O&&_react().default.createElement(_reactNative().View,{style:T.layout.overlay,pointerEvents:"none",testID:"rv-image-loading"},f||_react().default.createElement(_reactNative().ActivityIndicator,{color:T.colors.text,size:(0,_utils.isString)(g)?g:"small",style:{transform:[{scale:X/T.defaults.loadingIndicatorBaseSize}]}}),re(A,T.colors.text,T.defaults.loadingLabelMarginTop)),oe,"error"===F&&P&&_react().default.createElement(_reactNative().View,{style:T.layout.overlay,pointerEvents:"none",testID:"rv-image-error"},_&&_react().default.createElement(_reactNative().View,{style:[T.layout.iconContainer,{width:Z,height:Z}]},_),(0,_validate.isRenderable)(m)?re(m,T.colors.error):re(W,T.colors.error)),x);return te?_react().default.createElement(_reactNative().Pressable,_extends({},te,{accessibilityRole:ee,accessibilityLabel:z,style:ae}),ne):_react().default.createElement(_reactNative().View,{accessibilityLabel:z,style:ae},ne)},ImageForwardRef=_react().default.forwardRef(ImageImpl),Image=_react().default.memo(ImageForwardRef);var _default=exports.default=Image;

package/dist/cjs/components/image/index.js

@@ -1,16 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-Object.defineProperty(exports, "useImageTokens", {
-  enumerable: true,
-  get: function () {
-    return _tokens.useImageTokens;
-  }
-});
-var _Image = _interopRequireDefault(require("./Image"));
-var _tokens = require("./tokens");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = _Image.default;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0,Object.defineProperty(exports,"useImageTokens",{enumerable:!0,get:function(){return _tokens.useImageTokens}});var _Image=_interopRequireDefault(require("./Image")),_tokens=require("./tokens");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=_Image.default;

package/dist/cjs/components/image/tokens.js

@@ -1,66 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useImageTokens = void 0;
-var _designSystem = require("../../design-system");
-const createTokens = foundations => {
-  const {
-    palette,
-    spacing,
-    fontSize,
-    radii,
-    typography
-  } = foundations;
-  return {
-    defaults: {
-      fit: 'cover',
-      showLoading: true,
-      showError: true,
-      loadingText: 'Loading...',
-      errorText: 'Failed to load',
-      iconSize: 20,
-      loadingIndicatorBaseSize: 20,
-      loadingLabelMarginTop: spacing.xs,
-      roundRadius: radii.full
-    },
-    layout: {
-      container: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        overflow: 'hidden'
-      },
-      overlay: {
-        position: 'absolute',
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-        alignItems: 'center',
-        justifyContent: 'center'
-      },
-      label: {
-        fontFamily: typography.fontFamily,
-        fontSize: fontSize.xs
-      },
-      iconContainer: {
-        alignItems: 'center',
-        justifyContent: 'center'
-      },
-      absoluteFill: {
-        position: 'absolute',
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0
-      }
-    },
-    colors: {
-      background: '#ffffff',
-      text: palette.default[500],
-      error: palette.danger[500]
-    }
-  };
-};
-const useImageTokens = exports.useImageTokens = (0, _designSystem.createComponentTokensHook)('image', createTokens);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useImageTokens=void 0;var _designSystem=require("../../design-system");const createTokens=e=>{const{palette:t,spacing:o,fontSize:n,radii:i,typography:r}=e;return{defaults:{fit:"cover",showLoading:!0,showError:!0,loadingText:"Loading...",errorText:"Failed to load",iconSize:20,loadingIndicatorBaseSize:20,loadingLabelMarginTop:o.xs,roundRadius:i.full},layout:{container:{alignItems:"center",justifyContent:"center",overflow:"hidden"},overlay:{position:"absolute",top:0,right:0,bottom:0,left:0,alignItems:"center",justifyContent:"center"},label:{fontFamily:r.fontFamily,fontSize:n.xs},iconContainer:{alignItems:"center",justifyContent:"center"},absoluteFill:{position:"absolute",top:0,right:0,bottom:0,left:0}},colors:{background:"#ffffff",text:t.default[500],error:t.danger[500]}}},useImageTokens=exports.useImageTokens=(0,_designSystem.createComponentTokensHook)("image",createTokens);