react-native-system-ui 0.0.1 → 0.0.2

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

@@ -1,105 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useGridTokens = exports.createGridTokens = void 0;
-var _designSystem = require("../../design-system");
-const createGridTokens = foundations => {
-  const {
-    palette,
-    spacing,
-    fontSize,
-    typography,
-    opacity
-  } = foundations;
-  return {
-    defaults: {
-      columnNum: 4,
-      gutter: 0,
-      border: true,
-      center: true,
-      square: false,
-      direction: 'vertical',
-      reverse: false,
-      clickable: false,
-      iconSize: 28,
-      pressedOpacity: opacity.pressed,
-      textNumberOfLines: 2
-    },
-    layout: {
-      container: {
-        flexDirection: 'row',
-        flexWrap: 'wrap'
-      },
-      border: {
-        position: 'absolute',
-        left: 0,
-        right: 0,
-        height: 1,
-        zIndex: 1
-      },
-      borderTop: {
-        top: 0
-      },
-      borderBottom: {
-        bottom: 0
-      },
-      itemContentBase: {
-        justifyContent: 'center'
-      },
-      itemVertical: {
-        flexDirection: 'column'
-      },
-      itemHorizontal: {
-        flexDirection: 'row',
-        alignItems: 'center'
-      },
-      itemCenter: {
-        alignItems: 'center'
-      },
-      itemReverseColumn: {
-        flexDirection: 'column-reverse'
-      },
-      itemReverseRow: {
-        flexDirection: 'row-reverse'
-      },
-      iconWrapper: {
-        alignItems: 'center',
-        justifyContent: 'center'
-      },
-      text: {
-        textAlign: 'center'
-      },
-      itemBorderRight: {
-        width: 1
-      },
-      itemBorderBottom: {
-        height: 1
-      },
-      itemContentSquare: {
-        width: '100%',
-        aspectRatio: 1
-      }
-    },
-    colors: {
-      border: palette.default[200],
-      text: palette.default[600],
-      background: '#ffffff',
-      active: palette.default[100]
-    },
-    typography: {
-      fontSize: fontSize.sm,
-      fontFamily: typography.fontFamily,
-      lineHeight: Math.round(fontSize.sm * typography.lineHeightMultiplier),
-      fontWeight: String(typography.weight.regular)
-    },
-    spacing: {
-      paddingHorizontal: spacing.sm,
-      paddingVertical: spacing.md,
-      iconGap: spacing.sm
-    }
-  };
-};
-exports.createGridTokens = createGridTokens;
-const useGridTokens = exports.useGridTokens = (0, _designSystem.createComponentTokensHook)('grid', createGridTokens);

package/dist/cjs/components/grid/types.d.ts

@@ -1,82 +0,0 @@
-import type { PressableProps, StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native'
-
-import type { BadgeProps } from '../badge'
-import type { DeepPartial } from '../../types'
-
-export type GridDirection = 'vertical' | 'horizontal'
-
-export interface GridTokens {
-  defaults: {
-    columnNum: number
-    gutter: number
-    border: boolean
-    center: boolean
-    square: boolean
-    direction: GridDirection
-    reverse: boolean
-    clickable: boolean
-    iconSize: number
-    pressedOpacity: number
-    textNumberOfLines: number
-  }
-  layout: {
-    container: ViewStyle
-    border: ViewStyle
-    borderTop: ViewStyle
-    borderBottom: ViewStyle
-    itemContentBase: ViewStyle
-    itemVertical: ViewStyle
-    itemHorizontal: ViewStyle
-    itemCenter: ViewStyle
-    itemReverseColumn: ViewStyle
-    itemReverseRow: ViewStyle
-    iconWrapper: ViewStyle
-    text: TextStyle
-    itemBorderRight: ViewStyle
-    itemBorderBottom: ViewStyle
-    itemContentSquare: ViewStyle
-  }
-  colors: {
-    border: string
-    text: string
-    background: string
-    active: string
-  }
-  typography: {
-    fontSize: number
-    fontFamily: string
-    lineHeight: number
-    fontWeight: string
-  }
-  spacing: {
-    paddingHorizontal: number
-    paddingVertical: number
-    iconGap: number
-  }
-}
-
-export interface GridProps extends ViewProps {
-  children?: React.ReactNode
-  columnNum?: number
-  gutter?: number
-  border?: boolean
-  center?: boolean
-  square?: boolean
-  direction?: GridDirection
-  reverse?: boolean
-  clickable?: boolean
-  iconSize?: number
-  iconColor?: string
-  tokensOverride?: DeepPartial<GridTokens>
-}
-
-export interface GridItemProps extends PressableProps {
-  children?: React.ReactNode
-  text?: React.ReactNode
-  icon?: React.ReactNode | ((size: number, color: string) => React.ReactNode)
-  iconColor?: string
-  badge?: BadgeProps
-  dot?: boolean
-  contentStyle?: StyleProp<ViewStyle>
-  textStyle?: StyleProp<TextStyle>
-}

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

@@ -1,225 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-function _react() {
-  const data = _interopRequireDefault(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 _validate = require("../../utils/validate");
-var _tokens = require("./tokens");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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 FIT_MODE_MAP = {
-  fill: 'stretch',
-  'scale-down': 'contain',
-  none: 'center'
-};
-const resolveFitMode = fit => FIT_MODE_MAP[fit] || (fit ?? 'cover');
-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 container = {};
-  const image = {};
-  Object.keys(flattened).forEach(key => {
-    const value = flattened[key];
-    if (value === undefined) return;
-    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 Image = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
-  const {
-    src,
-    source,
-    width,
-    height,
-    radius,
-    round,
-    fit: fitProp,
-    showLoading: showLoadingProp,
-    showError: showErrorProp,
-    loadingText: loadingTextProp,
-    loadingIcon,
-    errorIcon,
-    iconSize: iconSizeProp,
-    loadingSize,
-    errorText: errorTextProp,
-    fallback,
-    onPress,
-    alt,
-    containerStyle,
-    style,
-    children,
-    tokensOverride,
-    onLoad,
-    onError,
-    ...rest
-  } = props;
-  const tokens = (0, _tokens.useImageTokens)(tokensOverride);
-  const fit = fitProp ?? tokens.defaults.fit;
-  const showLoading = showLoadingProp ?? tokens.defaults.showLoading;
-  const showError = showErrorProp ?? tokens.defaults.showError;
-  const loadingText = loadingTextProp ?? tokens.defaults.loadingText;
-  const errorText = errorTextProp ?? tokens.defaults.errorText;
-  const {
-    container: containerLayoutStyle,
-    image: imageStyleWithoutLayout
-  } = _react().default.useMemo(() => splitImageStyle(style), [style]);
-  const resolvedAccessibilityLabel = alt ?? rest.accessibilityLabel ?? rest['aria-label'];
-  const actualSource = _react().default.useMemo(() => {
-    if (source) return source;
-    if (src) return {
-      uri: src
-    };
-    return undefined;
-  }, [source, src]);
-  const [status, setStatus] = _react().default.useState(() => actualSource ? 'loading' : 'idle');
-  _react().default.useEffect(() => {
-    setStatus(actualSource ? 'loading' : 'idle');
-  }, [actualSource]);
-  const handleLoad = _react().default.useCallback(event => {
-    setStatus('loaded');
-    onLoad?.(event);
-  }, [onLoad]);
-  const handleError = _react().default.useCallback(event => {
-    setStatus('error');
-    onError?.(event);
-  }, [onError]);
-  const handleSvgLoad = _react().default.useCallback(() => {
-    handleLoad({
-      nativeEvent: {}
-    });
-  }, [handleLoad]);
-  const handleSvgError = _react().default.useCallback(error => {
-    handleError({
-      nativeEvent: {
-        error
-      }
-    });
-  }, [handleError]);
-  const uri = actualSource?.uri;
-  const isSvg = _react().default.useMemo(() => {
-    const normalizedUri = (0, _validate.isString)(uri) ? uri.toLowerCase() : undefined;
-    return (0, _validate.isString)(normalizedUri) && (normalizedUri.endsWith('.svg') || normalizedUri.includes('.svg?') || normalizedUri.includes('/svg?'));
-  }, [uri]);
-  const resolvedLoadingSize = (0, _validate.isNumber)(loadingSize) ? loadingSize : tokens.defaults.loadingIndicatorBaseSize;
-  const resolvedErrorIconSize = iconSizeProp ?? tokens.defaults.iconSize;
-  const Container = onPress ? _reactNative().Pressable : _reactNative().View;
-  const containerRole = onPress ? 'button' : undefined;
-  const renderLabel = (node, color, marginTop) => {
-    if (node == null || node === false) return null;
-    if ((0, _validate.isText)(node)) {
-      return /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-        style: [tokens.layout.label, {
-          color
-        }, marginTop ? {
-          marginTop
-        } : null]
-      }, node);
-    }
-    return marginTop ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: {
-        marginTop
-      }
-    }, node) : node;
-  };
-  return /*#__PURE__*/_react().default.createElement(Container, {
-    onPress: onPress,
-    accessibilityRole: containerRole,
-    accessibilityLabel: alt,
-    style: [tokens.layout.container, {
-      width,
-      height,
-      backgroundColor: tokens.colors.background
-    }, round ? {
-      borderRadius: tokens.defaults.roundRadius
-    } : (0, _validate.isNumber)(radius) ? {
-      borderRadius: radius
-    } : undefined, containerStyle, containerLayoutStyle]
-  }, status === '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, _validate.isString)(loadingSize) ? loadingSize : 'small',
-    style: {
-      transform: [{
-        scale: resolvedLoadingSize / tokens.defaults.loadingIndicatorBaseSize
-      }]
-    }
-  }), renderLabel(loadingText, tokens.colors.text, tokens.defaults.loadingLabelMarginTop)) : null, actualSource ? isSvg && _reactNative().Platform.OS !== 'web' ? /*#__PURE__*/_react().default.createElement(_reactNativeSvg().SvgUri, _extends({
-    width: "100%",
-    height: "100%",
-    uri: actualSource.uri,
-    preserveAspectRatio: resolvePreserveAspectRatio(fit),
-    accessible: !onPress,
-    accessibilityLabel: !onPress ? alt : undefined
-  }, rest, {
-    style: [tokens.layout.absoluteFill, imageStyleWithoutLayout],
-    onLoad: handleSvgLoad,
-    onError: handleSvgError
-  })) : /*#__PURE__*/_react().default.createElement(_reactNative().Image, _extends({
-    ref: ref,
-    accessible: !onPress,
-    accessibilityLabel: !onPress ? alt : undefined
-  }, rest, {
-    source: actualSource,
-    style: [tokens.layout.absoluteFill, imageStyleWithoutLayout],
-    resizeMode: resolveFitMode(fit),
-    onLoad: handleLoad,
-    onError: handleError
-  })) : null, status === '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: resolvedErrorIconSize,
-      height: resolvedErrorIconSize
-    }]
-  }, errorIcon) : null, fallback !== undefined && fallback !== null && fallback !== false ? renderLabel(fallback, tokens.colors.error) : renderLabel(errorText, tokens.colors.error)) : null, children);
-});
-Image.displayName = 'Image';
-var _default = exports.default = Image;

package/dist/cjs/components/image/types.d.ts

@@ -1,56 +0,0 @@
-import type * as React from 'react'
-import type { ImageProps as RNImageProps, ImageSourcePropType, ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native'
-
-import type { DeepPartial } from '../../types'
-
-export type ImageFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'
-
-export interface ImageTokens {
-  defaults: {
-    fit: ImageFit
-    showLoading: boolean
-    showError: boolean
-    loadingText: React.ReactNode
-    errorText: React.ReactNode
-    iconSize: number
-    loadingIndicatorBaseSize: number
-    loadingLabelMarginTop: number
-    roundRadius: number
-  }
-  layout: {
-    container: ViewStyle
-    overlay: ViewStyle
-    label: TextStyle
-    iconContainer: ViewStyle
-    absoluteFill: ImageStyle
-  }
-  colors: {
-    background: string
-    text: string
-    error: string
-  }
-}
-
-export interface ImageProps extends Omit<RNImageProps, 'source' | 'width' | 'height'> {
-  src?: string
-  source?: ImageSourcePropType
-  width?: number | string
-  height?: number | string
-  radius?: number
-  round?: boolean
-  fit?: ImageFit
-  showLoading?: boolean
-  showError?: boolean
-  loadingText?: React.ReactNode
-  loadingIcon?: React.ReactNode
-  errorIcon?: React.ReactNode
-  iconSize?: number
-  loadingSize?: 'small' | 'large' | number
-  errorText?: React.ReactNode
-  fallback?: React.ReactNode
-  onPress?: (event: any) => void
-  alt?: string
-  containerStyle?: StyleProp<ViewStyle>
-  children?: React.ReactNode
-  tokensOverride?: DeepPartial<ImageTokens>
-}