react-native-system-ui 1.0.2 → 1.0.4

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

@@ -1,93 +1 @@
-"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: {},
-      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: {
-      fontFamily: typography.fontFamily,
-      fontSize: fontSize.sm,
-      fontWeight: typography.weight.medium,
-      contentFontSize: fontSize.sm
-    },
-    sizing: {
-      width: 120,
-      itemHeight: 48,
-      indicatorWidth: 4
-    },
-    borders: {
-      width: borderWidth
-    }
-  };
-};
-exports.createSidebarTokens = createSidebarTokens;
-const useSidebarTokens = exports.useSidebarTokens = (0, _designSystem.createComponentTokensHook)('sidebar', createSidebarTokens);
+"use strict";function _reactNative(){const e=require("react-native");return _reactNative=function(){return e},e}Object.defineProperty(exports,"__esModule",{value:!0}),exports.useSidebarTokens=exports.createSidebarTokens=void 0;var _designSystem=require("../../design-system");const createSidebarTokens=e=>{const{palette:t,fontSize:i,typography:r}=e,n=e.surface??"#ffffff",o=_reactNative().StyleSheet.hairlineWidth;return{defaults:{disabled:!1},layout:{container:{flexDirection:"row"},side:{},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:!1}},colors:{background:n,border:t.default[200],title:t.default[800],titleActive:t.primary[600],disabled:t.default[400],indicator:t.primary[600]},typography:{fontFamily:r.fontFamily,fontSize:i.sm,fontWeight:r.weight.medium,contentFontSize:i.sm},sizing:{width:120,itemHeight:48,indicatorWidth:4},borders:{width:o}}};exports.createSidebarTokens=createSidebarTokens;const useSidebarTokens=exports.useSidebarTokens=(0,_designSystem.createComponentTokensHook)("sidebar",createSidebarTokens);

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

@@ -1,162 +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;
-}
-var _platform = require("../../platform");
-var _animation = require("../../hooks/animation");
-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) => Array.from({
-  length: count
-}, (_, idx) => normalize(Array.isArray(input) ? input[idx] : input, fallback));
-const SkeletonImpl = (props, ref) => {
-  const {
-    tokensOverride,
-    isLoaded,
-    loading: loadP,
-    animate: animP,
-    startColor,
-    speed: speedP,
-    avatar: avP,
-    avatarSize: avSzP,
-    avatarShape: avShapeP,
-    title: titleP,
-    titleWidth: titleWP,
-    row: rowP,
-    rowWidth: rowWP,
-    rowHeight,
-    round: roundP,
-    style,
-    children,
-    ...rest
-  } = props;
-  const tokens = (0, _tokens.useSkeletonTokens)(tokensOverride);
-  const reducedMotion = (0, _animation.useReducedMotion)();
-  const loading = loadP ?? (isLoaded != null ? !isLoaded : true);
-  const animate = animP ?? true;
-  const avatar = avP ?? false;
-  const avatarSize = avSzP ?? tokens.defaults.avatarSize;
-  const avatarShape = avShapeP ?? 'round';
-  const title = titleP ?? false;
-  const titleWidth = titleWP ?? tokens.defaults.titleWidth;
-  const row = rowP ?? tokens.defaults.rowCount;
-  const rowWidth = rowWP ?? tokens.defaults.rowWidth;
-  const round = roundP ?? false;
-  const speed = (0, _utils.isFiniteNumber)(speedP) ? Math.max(0.01, speedP) : (0, _utils.isString)(speedP) && Number.isFinite(Number(speedP)) && Number(speedP) > 0 ? Number(speedP) : 1;
-  const duration = Math.max(0, tokens.animation.duration / speed);
-  const blockColor = startColor ?? tokens.colors.block;
-  const rows = (0, _utils.isFiniteNumber)(row) ? Math.max(0, Math.floor(row)) : 0;
-  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 = rowHeights[0] ?? tokens.defaults.rowHeight;
-  const rAvSz = normalize(avatarSize, tokens.defaults.avatarSize);
-  const rTitleW = normalize(titleWidth, tokens.defaults.titleWidth);
-  const animated = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
-  (0, _react().useEffect)(() => {
-    if (!loading || !animate || duration <= 0 || reducedMotion) {
-      animated.setValue(0);
-      return;
-    }
-    ;
-    const loop = _reactNative().Animated.loop(_reactNative().Animated.sequence([_reactNative().Animated.timing(animated, {
-      toValue: 1,
-      duration: duration / 2,
-      useNativeDriver: _platform.nativeDriverEnabled,
-      isInteraction: false
-    }), _reactNative().Animated.timing(animated, {
-      toValue: 0,
-      duration: duration / 2,
-      useNativeDriver: _platform.nativeDriverEnabled,
-      isInteraction: false
-    })]));
-    loop.start();
-    return () => loop.stop();
-  }, [animate, animated, duration, loading, reducedMotion]);
-  const animStyle = (0, _react().useMemo)(() => !loading || !animate ? undefined : {
-    opacity: animated.interpolate({
-      inputRange: [0, 1],
-      outputRange: [tokens.animation.minOpacity, tokens.animation.maxOpacity]
-    })
-  }, [animate, animated, loading, tokens.animation.maxOpacity, tokens.animation.minOpacity]);
-  const ctrStyles = [S.ctr, {
-    gap: tokens.spacing.containerGap
-  }, style];
-  const avatarNode = (0, _react().useMemo)(() => !avatar ? null : /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
-    style: [{
-      width: rAvSz,
-      height: rAvSz,
-      borderRadius: avatarShape === 'round' ? 999 : tokens.radius,
-      backgroundColor: blockColor
-    }, animStyle]
-  }), [animStyle, avatar, avatarShape, blockColor, rAvSz, tokens.radius]);
-  const titleNode = (0, _react().useMemo)(() => !title ? null : /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
-    style: [{
-      width: rTitleW,
-      height: titleHeight,
-      backgroundColor: blockColor,
-      borderRadius: round ? tokens.radius : 0
-    }, animStyle]
-  }), [animStyle, blockColor, rTitleW, round, title, titleHeight, tokens.radius]);
-  const rowNodes = (0, _react().useMemo)(() => rows <= 0 ? null : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: S.rows
-  }, rowWidths.map((w, i) => /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
-    key: i,
-    testID: `rv-skeleton-row-${i}`,
-    style: [{
-      width: w,
-      height: rowHeights[i],
-      marginTop: i === 0 && !title ? 0 : tokens.spacing.rowGap,
-      backgroundColor: blockColor,
-      borderRadius: round ? tokens.radius : 0
-    }, animStyle]
-  }))), [animStyle, blockColor, rowHeights, rowWidths, rows, round, title, 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: ctrStyles
-  }, rest), avatarNode, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: S.cnt
-  }, titleNode, rowNodes));
-};
-const S = _reactNative().StyleSheet.create({
-  ctr: {
-    flexDirection: 'row',
-    alignItems: 'flex-start'
-  },
-  cnt: {
-    flex: 1
-  },
-  rows: {
-    width: '100%'
-  }
-});
-const SkeletonForwardRef = /*#__PURE__*/_react().default.forwardRef(SkeletonImpl);
-SkeletonForwardRef.displayName = 'Skeleton';
-const Skeleton = /*#__PURE__*/_react().default.memo(SkeletonForwardRef);
-var _default = exports.default = Skeleton;
+"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}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _platform=require("../../platform"),_animation=require("../../hooks/animation"),_utils=require("../../utils"),_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,n,o={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return o;if(i=t?a:r){if(i.has(e))return i.get(e);i.set(e,o)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((n=(i=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(n.get||n.set)?i(o,t,n):o[t]=e[t]);return o})(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 normalize=(e,t)=>(0,_utils.isFiniteNumber)(e)?Math.max(0,e):(0,_utils.isString)(e)&&e.trim()?e.trim():t,resolveSeries=(e,t,r)=>Array.from({length:e},(e,a)=>normalize(Array.isArray(t)?t[a]:t,r)),SkeletonImpl=(e,t)=>{const{tokensOverride:r,isLoaded:a,loading:i,animate:n,startColor:o,speed:l,avatar:u,avatarSize:s,avatarShape:d,title:c,titleWidth:f,row:m,rowWidth:_,rowHeight:p,round:v,style:w,children:h,...g}=e,y=(0,_tokens.useSkeletonTokens)(r),N=(0,_animation.useReducedMotion)(),k=i??(null==a||!a),b=n??!0,W=u??!1,x=s??y.defaults.avatarSize,M=d??"round",R=c??!1,A=f??y.defaults.titleWidth,O=m??y.defaults.rowCount,V=_??y.defaults.rowWidth,q=v??!1,E=(0,_utils.isFiniteNumber)(l)?Math.max(.01,l):(0,_utils.isString)(l)&&Number.isFinite(Number(l))&&Number(l)>0?Number(l):1,z=Math.max(0,y.animation.duration/E),D=o??y.colors.block,F=(0,_utils.isFiniteNumber)(O)?Math.max(0,Math.floor(O)):0,j=(0,_react().useMemo)(()=>{const t=resolveSeries(F,V,y.defaults.rowWidth);return!Array.isArray(V)&&F>1&&(void 0===e.rowWidth||(0,_utils.isString)(e.rowWidth)&&"100%"===e.rowWidth.trim())&&(t[F-1]=y.defaults.lastRowWidth),t},[e.rowWidth,V,F,y.defaults.lastRowWidth,y.defaults.rowWidth]),I=(0,_react().useMemo)(()=>resolveSeries(F,p,y.defaults.rowHeight),[p,F,y.defaults.rowHeight]),C=I[0]??y.defaults.rowHeight,P=normalize(x,y.defaults.avatarSize),H=normalize(A,y.defaults.titleWidth),G=(0,_react().useRef)(new(_reactNative().Animated.Value)(0)).current;(0,_react().useEffect)(()=>{if(!k||!b||z<=0||N)return void G.setValue(0);const e=_reactNative().Animated.loop(_reactNative().Animated.sequence([_reactNative().Animated.timing(G,{toValue:1,duration:z/2,useNativeDriver:_platform.nativeDriverEnabled,isInteraction:!1}),_reactNative().Animated.timing(G,{toValue:0,duration:z/2,useNativeDriver:_platform.nativeDriverEnabled,isInteraction:!1})]));return e.start(),()=>e.stop()},[b,G,z,k,N]);const T=(0,_react().useMemo)(()=>k&&b?{opacity:G.interpolate({inputRange:[0,1],outputRange:[y.animation.minOpacity,y.animation.maxOpacity]})}:void 0,[b,G,k,y.animation.maxOpacity,y.animation.minOpacity]),L=[S.ctr,{gap:y.spacing.containerGap},w],$=(0,_react().useMemo)(()=>W?_react().default.createElement(_reactNative().Animated.View,{style:[{width:P,height:P,borderRadius:"round"===M?999:y.radius,backgroundColor:D},T]}):null,[T,W,M,D,P,y.radius]),B=(0,_react().useMemo)(()=>R?_react().default.createElement(_reactNative().Animated.View,{style:[{width:H,height:C,backgroundColor:D,borderRadius:q?y.radius:0},T]}):null,[T,D,H,q,R,C,y.radius]),J=(0,_react().useMemo)(()=>F<=0?null:_react().default.createElement(_reactNative().View,{style:S.rows},j.map((e,t)=>_react().default.createElement(_reactNative().Animated.View,{key:t,testID:`rv-skeleton-row-${t}`,style:[{width:e,height:I[t],marginTop:0!==t||R?y.spacing.rowGap:0,backgroundColor:D,borderRadius:q?y.radius:0},T]}))),[T,D,I,j,F,q,R,y.radius,y.spacing.rowGap]);return k?_react().default.createElement(_reactNative().View,_extends({ref:t,style:L},g),$,_react().default.createElement(_reactNative().View,{style:S.cnt},B,J)):_react().default.createElement(_reactNative().View,_extends({ref:t,style:w},g),h)},S=_reactNative().StyleSheet.create({ctr:{flexDirection:"row",alignItems:"flex-start"},cnt:{flex:1},rows:{width:"100%"}}),SkeletonForwardRef=_react().default.forwardRef(SkeletonImpl);SkeletonForwardRef.displayName="Skeleton";const Skeleton=_react().default.memo(SkeletonForwardRef);var _default=exports.default=Skeleton;

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

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

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

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