react-native-system-ui 0.0.1-beta0 → 0.0.2

package/dist/cjs/sidebar/tokens.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSidebarTokens = exports.createSidebarTokens = void 0;
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _designSystem = require("../../design-system");
+const createSidebarTokens = foundations => {
+  const {
+    palette,
+    fontSize,
+    typography
+  } = foundations;
+  const borderWidth = _reactNative().StyleSheet.hairlineWidth;
+  return {
+    defaults: {
+      disabled: false
+    },
+    layout: {
+      container: {
+        flexDirection: 'row'
+      },
+      side: {
+        borderRightWidth: borderWidth
+      },
+      content: {
+        flex: 1,
+        minWidth: 0
+      },
+      item: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 16
+      },
+      indicatorWrapper: {
+        width: 12,
+        alignItems: 'center'
+      },
+      itemContent: {
+        flex: 1,
+        paddingVertical: 12
+      },
+      indicator: {
+        height: 20
+      },
+      titleRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8
+      },
+      badge: {
+        marginLeft: 4
+      },
+      dot: {
+        width: 6,
+        height: 6,
+        borderRadius: 3
+      },
+      title: {
+        includeFontPadding: false
+      }
+    },
+    colors: {
+      background: '#ffffff',
+      border: palette.default[200],
+      title: palette.default[800],
+      titleActive: palette.primary[600],
+      disabled: palette.default[400],
+      indicator: palette.primary[600]
+    },
+    typography: {
+      fontSize: fontSize.sm,
+      fontWeight: typography.weight.medium
+    },
+    sizing: {
+      width: 120,
+      itemHeight: 48,
+      indicatorWidth: 4
+    },
+    borders: {
+      width: borderWidth
+    }
+  };
+};
+exports.createSidebarTokens = createSidebarTokens;
+const useSidebarTokens = exports.useSidebarTokens = (0, _designSystem.createComponentTokensHook)('sidebar', createSidebarTokens);

package/dist/cjs/skeleton/Skeleton.js

@@ -0,0 +1,167 @@
+"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;
+}
+var _platform = require("../../platform");
+var _utils = require("../../utils");
+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 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
+  }, (_, idx) => normalize(Array.isArray(input) ? input[idx] : input, fallback));
+};
+const Skeleton = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
+  const {
+    tokensOverride,
+    loading: loadingProp,
+    animate: animateProp,
+    avatar: avatarProp,
+    avatarSize: avatarSizeProp,
+    avatarShape: avatarShapeProp,
+    title: titleProp,
+    titleWidth: titleWidthProp,
+    row: rowProp,
+    rowWidth: rowWidthProp,
+    rowHeight,
+    round: roundProp,
+    style,
+    children,
+    ...rest
+  } = props;
+  const tokens = (0, _tokens.useSkeletonTokens)(tokensOverride);
+  const loading = loadingProp ?? true;
+  const animate = animateProp ?? true;
+  const avatar = avatarProp ?? false;
+  const avatarSize = avatarSizeProp ?? tokens.defaults.avatarSize;
+  const avatarShape = avatarShapeProp ?? 'round';
+  const title = titleProp ?? false;
+  const titleWidth = titleWidthProp ?? tokens.defaults.titleWidth;
+  const row = rowProp ?? tokens.defaults.rowCount;
+  const rowWidth = rowWidthProp ?? tokens.defaults.rowWidth;
+  const round = roundProp ?? false;
+  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;
+    }
+    const loop = _reactNative().Animated.loop(_reactNative().Animated.sequence([_reactNative().Animated.timing(animated, {
+      toValue: 1,
+      duration: tokens.animation.duration / 2,
+      useNativeDriver: _platform.nativeDriverEnabled
+    }), _reactNative().Animated.timing(animated, {
+      toValue: 0,
+      duration: tokens.animation.duration / 2,
+      useNativeDriver: _platform.nativeDriverEnabled
+    })]));
+    loop.start();
+    return () => loop.stop();
+  }, [animate, animated, loading, tokens.animation.duration]);
+  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,
+      style: style
+    }, rest), children);
+  }
+  return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
+    ref: ref,
+    style: containerStyles
+  }, rest), avatarNode, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: styles.content
+  }, titleNode, rowNodes));
+});
+const styles = _reactNative().StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'flex-start'
+  },
+  content: {
+    flex: 1
+  },
+  rows: {
+    width: '100%'
+  }
+});
+Skeleton.displayName = 'Skeleton';
+var _default = exports.default = Skeleton;

package/dist/cjs/skeleton/index.js

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

package/dist/cjs/skeleton/tokens.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSkeletonTokens = void 0;
+var _designSystem = require("../../design-system");
+const createTokens = foundations => {
+  const {
+    palette,
+    spacing,
+    radii
+  } = foundations;
+  const surfaceMuted = palette.default[100];
+  return {
+    defaults: {
+      rowCount: 3,
+      rowWidth: '100%',
+      lastRowWidth: '60%',
+      rowHeight: 16,
+      avatarSize: 32,
+      titleWidth: '40%'
+    },
+    colors: {
+      block: surfaceMuted,
+      highlight: '#ffffff'
+    },
+    radius: radii.sm,
+    spacing: {
+      containerGap: 12,
+      rowGap: spacing.xs
+    },
+    animation: {
+      duration: 1200,
+      minOpacity: 0.3,
+      maxOpacity: 0.85
+    }
+  };
+};
+const useSkeletonTokens = exports.useSkeletonTokens = (0, _designSystem.createComponentTokensHook)('skeleton', createTokens);