react-native-system-ui 0.0.1 → 0.0.3

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

@@ -15,7 +15,8 @@ var _designSystem = require("../../design-system");
 const createSidebarTokens = foundations => {
   const {
     palette,
-    fontSize
+    fontSize,
+    typography
   } = foundations;
   const borderWidth = _reactNative().StyleSheet.hairlineWidth;
   return {
@@ -76,7 +77,7 @@ const createSidebarTokens = foundations => {
     },
     typography: {
       fontSize: fontSize.sm,
-      fontWeight: '500'
+      fontWeight: typography.weight.medium
     },
     sizing: {
       width: 120,

package/dist/cjs/components/skeleton/Skeleton.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 function _react() {
-  const data = _interopRequireDefault(require("react"));
+  const data = _interopRequireWildcard(require("react"));
   _react = function () {
     return data;
   };
@@ -19,11 +19,11 @@ function _reactNative() {
   return data;
 }
 var _platform = require("../../platform");
-var _validate = require("../../utils/validate");
+var _utils = require("../../utils");
 var _tokens = require("./tokens");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 normalize = (value, fallback) => (0, _validate.isFiniteNumber)(value) ? Math.max(0, value) : (0, _validate.isString)(value) && value.trim() ? value.trim() : fallback;
+const normalize = (value, fallback) => (0, _utils.isFiniteNumber)(value) ? Math.max(0, value) : (0, _utils.isString)(value) && value.trim() ? value.trim() : fallback;
 const resolveSeries = (count, input, fallback) => {
   return Array.from({
     length: count
@@ -58,18 +58,21 @@ const Skeleton = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   const row = rowProp ?? tokens.defaults.rowCount;
   const rowWidth = rowWidthProp ?? tokens.defaults.rowWidth;
   const round = roundProp ?? false;
-  const rows = (0, _validate.isFiniteNumber)(row) ? Math.max(0, Math.floor(row)) : 0;
-  const rowWidths = resolveSeries(rows, rowWidth, tokens.defaults.rowWidth);
-  const rowHeights = resolveSeries(rows, rowHeight, tokens.defaults.rowHeight);
-  if (!Array.isArray(rowWidth) && rows > 1 && (props.rowWidth === undefined || (0, _validate.isString)(props.rowWidth) && props.rowWidth.trim() === '100%')) {
-    rowWidths[rows - 1] = tokens.defaults.lastRowWidth;
-  }
-  const titleHeight = rowHeights[0] ?? tokens.defaults.rowHeight;
-  const resolvedAvatarSize = normalize(avatarSize, tokens.defaults.avatarSize);
-  const resolvedTitleWidth = normalize(titleWidth, tokens.defaults.titleWidth);
-  const animated = _react().default.useRef(new (_reactNative().Animated.Value)(0)).current;
-  _react().default.useEffect(() => {
-    if (!loading || !animate) {
+  const rows = (0, _react().useMemo)(() => (0, _utils.isFiniteNumber)(row) ? Math.max(0, Math.floor(row)) : 0, [row]);
+  const rowWidths = (0, _react().useMemo)(() => {
+    const widths = resolveSeries(rows, rowWidth, tokens.defaults.rowWidth);
+    if (!Array.isArray(rowWidth) && rows > 1 && (props.rowWidth === undefined || (0, _utils.isString)(props.rowWidth) && props.rowWidth.trim() === '100%')) {
+      widths[rows - 1] = tokens.defaults.lastRowWidth;
+    }
+    return widths;
+  }, [props.rowWidth, rowWidth, rows, tokens.defaults.lastRowWidth, tokens.defaults.rowWidth]);
+  const rowHeights = (0, _react().useMemo)(() => resolveSeries(rows, rowHeight, tokens.defaults.rowHeight), [rowHeight, rows, tokens.defaults.rowHeight]);
+  const titleHeight = (0, _react().useMemo)(() => rowHeights[0] ?? tokens.defaults.rowHeight, [rowHeights, tokens.defaults.rowHeight]);
+  const resolvedAvatarSize = (0, _react().useMemo)(() => normalize(avatarSize, tokens.defaults.avatarSize), [avatarSize, tokens.defaults.avatarSize]);
+  const resolvedTitleWidth = (0, _react().useMemo)(() => normalize(titleWidth, tokens.defaults.titleWidth), [titleWidth, tokens.defaults.titleWidth]);
+  const animated = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
+  (0, _react().useEffect)(() => {
+    if (!loading || !animate || tokens.animation.duration <= 0) {
       animated.setValue(0);
       return;
     }
@@ -85,12 +88,56 @@ const Skeleton = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     loop.start();
     return () => loop.stop();
   }, [animate, animated, loading, tokens.animation.duration]);
-  const animatedStyle = !loading || !animate ? undefined : {
-    opacity: animated.interpolate({
-      inputRange: [0, 1],
-      outputRange: [tokens.animation.minOpacity, tokens.animation.maxOpacity]
-    })
-  };
+  const animatedStyle = (0, _react().useMemo)(() => {
+    if (!loading || !animate) return undefined;
+    return {
+      opacity: animated.interpolate({
+        inputRange: [0, 1],
+        outputRange: [tokens.animation.minOpacity, tokens.animation.maxOpacity]
+      })
+    };
+  }, [animate, animated, loading, tokens.animation.maxOpacity, tokens.animation.minOpacity]);
+  const containerStyles = (0, _react().useMemo)(() => [styles.container, {
+    gap: tokens.spacing.containerGap
+  }, style], [style, tokens.spacing.containerGap]);
+  const avatarNode = (0, _react().useMemo)(() => {
+    if (!avatar) return null;
+    return /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
+      style: [{
+        width: resolvedAvatarSize,
+        height: resolvedAvatarSize,
+        borderRadius: avatarShape === 'round' ? 999 : tokens.radius,
+        backgroundColor: tokens.colors.block
+      }, animatedStyle]
+    });
+  }, [animatedStyle, avatar, avatarShape, resolvedAvatarSize, tokens.colors.block, tokens.radius]);
+  const titleNode = (0, _react().useMemo)(() => {
+    if (!title) return null;
+    return /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
+      style: [{
+        width: resolvedTitleWidth,
+        height: titleHeight,
+        backgroundColor: tokens.colors.block,
+        borderRadius: round ? tokens.radius : 0
+      }, animatedStyle]
+    });
+  }, [animatedStyle, round, resolvedTitleWidth, title, titleHeight, tokens.colors.block, tokens.radius]);
+  const rowNodes = (0, _react().useMemo)(() => {
+    if (rows <= 0) return null;
+    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: styles.rows
+    }, rowWidths.map((width, index) => /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
+      key: index,
+      testID: `rv-skeleton-row-${index}`,
+      style: [{
+        width: width,
+        height: rowHeights[index],
+        marginTop: index === 0 && !title ? 0 : tokens.spacing.rowGap,
+        backgroundColor: tokens.colors.block,
+        borderRadius: round ? tokens.radius : 0
+      }, animatedStyle]
+    })));
+  }, [animatedStyle, rowHeights, rowWidths, round, rows, title, tokens.colors.block, tokens.radius, tokens.spacing.rowGap]);
   if (!loading) {
     return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
       ref: ref,
@@ -99,38 +146,10 @@ const Skeleton = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   }
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
     ref: ref,
-    style: [styles.container, {
-      gap: tokens.spacing.containerGap
-    }, style]
-  }, rest), avatar ? /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
-    style: [{
-      width: resolvedAvatarSize,
-      height: resolvedAvatarSize,
-      borderRadius: avatarShape === 'round' ? 999 : tokens.radius,
-      backgroundColor: tokens.colors.block
-    }, animatedStyle]
-  }) : null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: containerStyles
+  }, rest), avatarNode, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: styles.content
-  }, title ? /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
-    style: [{
-      width: resolvedTitleWidth,
-      height: titleHeight,
-      backgroundColor: tokens.colors.block,
-      borderRadius: round ? tokens.radius : 0
-    }, animatedStyle]
-  }) : null, rows > 0 ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: styles.rows
-  }, rowWidths.map((width, index) => /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
-    key: index,
-    testID: `rv-skeleton-row-${index}`,
-    style: [{
-      width,
-      height: rowHeights[index],
-      marginTop: index === 0 && !title ? 0 : tokens.spacing.rowGap,
-      backgroundColor: tokens.colors.block,
-      borderRadius: round ? tokens.radius : 0
-    }, animatedStyle]
-  }))) : null));
+  }, titleNode, rowNodes));
 });
 const styles = _reactNative().StyleSheet.create({
   container: {