react-native-system-ui 1.0.1 → 1.0.3

package/dist/es/components/sidebar/Sidebar.js

@@ -1,84 +1 @@
-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); }
-import React, { useMemo } from 'react';
-import { View } from 'react-native';
-import { mergeTokensOverride } from '../../design-system';
-import { useControllableValue } from '../../hooks';
-import { useDirection } from '../config-provider/useDirection';
-import { SidebarContext } from './SidebarContext';
-import { useSidebarTokens } from './tokens';
-import { createHairlineView, renderTextOrNode } from '../../utils';
-import { isRenderable } from '../../utils/validate';
-const SidebarBaseImpl = props => {
-  const {
-    children,
-    sideStyle,
-    style,
-    tokensOverride,
-    ...rest
-  } = props;
-  const tokens = useSidebarTokens(tokensOverride);
-  const dir = useDirection();
-  const sidebarItems = useMemo(() => {
-    const items = [];
-    React.Children.toArray(children).forEach((child, i) => {
-      if (/*#__PURE__*/React.isValidElement(child)) items.push({
-        element: child,
-        index: i
-      });
-    });
-    return items;
-  }, [children]);
-  const firstIdx = sidebarItems[0]?.index ?? 0;
-  const [activeIndex, setActiveIndex] = useControllableValue(props, {
-    defaultValue: firstIdx,
-    valuePropName: 'value',
-    defaultValuePropName: 'defaultValue',
-    trigger: 'onChange'
-  });
-  const curIdx = useMemo(() => {
-    for (const item of sidebarItems) {
-      if (item.index === activeIndex) return activeIndex;
-    }
-    ;
-    return firstIdx;
-  }, [activeIndex, firstIdx, sidebarItems]);
-  const ctxVal = useMemo(() => ({
-    activeIndex: curIdx,
-    onSelect: setActiveIndex
-  }), [curIdx, setActiveIndex]);
-  const cloned = useMemo(() => sidebarItems.map(item => /*#__PURE__*/React.cloneElement(item.element, {
-    key: item.element.key ?? item.index,
-    index: item.index,
-    tokensOverride: mergeTokensOverride(tokensOverride, item.element.props.tokensOverride)
-  })), [sidebarItems, tokensOverride]);
-  const activeItem = sidebarItems.find(item => item.index === curIdx)?.element;
-  const contentTxtStyle = useMemo(() => ({
-    fontFamily: tokens.typography.fontFamily,
-    fontSize: tokens.typography.contentFontSize,
-    fontWeight: tokens.typography.fontWeight
-  }), [tokens.typography.fontFamily, tokens.typography.contentFontSize, tokens.typography.fontWeight]);
-  const activeContent = !isRenderable(activeItem?.props?.children) ? null : renderTextOrNode(activeItem.props.children, contentTxtStyle);
-  return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
-    style: [tokens.layout.container, {
-      backgroundColor: tokens.colors.background
-    }, style]
-  }), /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.side, {
-      width: tokens.sizing.width
-    }, sideStyle],
-    accessibilityRole: "tablist"
-  }, /*#__PURE__*/React.createElement(SidebarContext.Provider, {
-    value: ctxVal
-  }, cloned), /*#__PURE__*/React.createElement(View, {
-    style: createHairlineView({
-      position: dir === 'rtl' ? 'left' : 'right',
-      color: tokens.colors.border,
-      top: 0,
-      bottom: 0
-    })
-  })), /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.content, activeItem?.props?.contentStyle]
-  }, activeContent));
-};
-const SidebarBase = /*#__PURE__*/React.memo(SidebarBaseImpl);
-export default SidebarBase;
+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 o in r)({}).hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},_extends.apply(null,arguments)}import React,{useMemo}from"react";import{View}from"react-native";import{mergeTokensOverride}from"../../design-system";import{useControllableValue}from"../../hooks";import{useDirection}from"../config-provider/useDirection";import{SidebarContext}from"./SidebarContext";import{useSidebarTokens}from"./tokens";import{createHairlineView,renderTextOrNode}from"../../utils";import{isRenderable}from"../../utils/validate";const SidebarBaseImpl=e=>{const{children:t,sideStyle:r,style:o,tokensOverride:n,...i}=e,a=useSidebarTokens(n),l=useDirection(),s=useMemo(()=>{const e=[];return React.Children.toArray(t).forEach((t,r)=>{React.isValidElement(t)&&e.push({element:t,index:r})}),e},[t]),d=s[0]?.index??0,[c,m]=useControllableValue(e,{defaultValue:d,valuePropName:"value",defaultValuePropName:"defaultValue",trigger:"onChange"}),u=useMemo(()=>{for(const e of s)if(e.index===c)return c;return d},[c,d,s]),p=useMemo(()=>({activeIndex:u,onSelect:m}),[u,m]),y=useMemo(()=>s.map(e=>React.cloneElement(e.element,{key:e.element.key??e.index,index:e.index,tokensOverride:mergeTokensOverride(n,e.element.props.tokensOverride)})),[s,n]),f=s.find(e=>e.index===u)?.element,g=useMemo(()=>({fontFamily:a.typography.fontFamily,fontSize:a.typography.contentFontSize,fontWeight:a.typography.fontWeight}),[a.typography.fontFamily,a.typography.contentFontSize,a.typography.fontWeight]),b=isRenderable(f?.props?.children)?renderTextOrNode(f.props.children,g):null;return React.createElement(View,_extends({},i,{style:[a.layout.container,{backgroundColor:a.colors.background},o]}),React.createElement(View,{style:[a.layout.side,{width:a.sizing.width},r],accessibilityRole:"tablist"},React.createElement(SidebarContext.Provider,{value:p},y),React.createElement(View,{style:createHairlineView({position:"rtl"===l?"left":"right",color:a.colors.border,top:0,bottom:0})})),React.createElement(View,{style:[a.layout.content,f?.props?.contentStyle]},b))},SidebarBase=React.memo(SidebarBaseImpl);export default SidebarBase;

package/dist/es/components/sidebar/SidebarContext.js

@@ -1,3 +1 @@
-import React, { useContext } from 'react';
-export const SidebarContext = /*#__PURE__*/React.createContext(null);
-export const useSidebarContext = () => useContext(SidebarContext);
+import React,{useContext}from"react";export const SidebarContext=React.createContext(null);export const useSidebarContext=()=>useContext(SidebarContext);

package/dist/es/components/sidebar/SidebarItem.js

@@ -1,84 +1 @@
-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); }
-import React from 'react';
-import { Pressable, Text, View } from 'react-native';
-import { useAriaPress } from '../../hooks';
-import { isRenderable, isText } from '../../utils';
-import Badge from '../badge';
-import { useSidebarContext } from './SidebarContext';
-import { useSidebarTokens } from './tokens';
-const SidebarItemImpl = props => {
-  const {
-    title,
-    badge,
-    disabled: disabledProp,
-    dot,
-    onClick,
-    textStyle,
-    badgeStyle,
-    contentStyle: _contentStyle,
-    style,
-    index = 0,
-    children: _children,
-    tokensOverride,
-    ...rest
-  } = props;
-  const tokens = useSidebarTokens(tokensOverride);
-  const ctx = useSidebarContext();
-  if (!ctx) return null;
-  const disabled = disabledProp ?? tokens.defaults.disabled;
-  const isActive = ctx.activeIndex === index;
-  const titleClr = disabled ? tokens.colors.disabled : isActive ? tokens.colors.titleActive : tokens.colors.title;
-  const press = useAriaPress({
-    disabled,
-    onPress: () => {
-      onClick?.(index);
-      ctx.onSelect(index);
-    },
-    extraProps: {
-      accessibilityRole: 'tab',
-      accessibilityState: {
-        selected: isActive,
-        disabled
-      },
-      testID: `rv-sidebar-item-${index}`
-    }
-  });
-  const indStyle = [tokens.layout.indicator, {
-    width: tokens.sizing.indicatorWidth,
-    borderRadius: tokens.sizing.indicatorWidth,
-    backgroundColor: tokens.colors.indicator
-  }];
-  const titleNode = isRenderable(title) ? isText(title) ? /*#__PURE__*/React.createElement(Text, {
-    style: [tokens.layout.title, {
-      color: titleClr,
-      fontFamily: tokens.typography.fontFamily,
-      fontSize: tokens.typography.fontSize,
-      fontWeight: tokens.typography.fontWeight
-    }, textStyle]
-  }, title) : title : null;
-  const badgeNode = isRenderable(badge) ? /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.badge, badgeStyle]
-  }, isText(badge) ? /*#__PURE__*/React.createElement(Badge, {
-    content: badge
-  }) : badge) : null;
-  const dotNode = dot ? /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.dot, {
-      backgroundColor: tokens.colors.indicator
-    }]
-  }) : null;
-  return /*#__PURE__*/React.createElement(Pressable, _extends({}, rest, press.interactionProps, {
-    style: [tokens.layout.item, {
-      height: tokens.sizing.itemHeight
-    }, style]
-  }), /*#__PURE__*/React.createElement(View, {
-    style: tokens.layout.indicatorWrapper
-  }, isActive && /*#__PURE__*/React.createElement(View, {
-    style: indStyle
-  })), /*#__PURE__*/React.createElement(View, {
-    style: tokens.layout.itemContent
-  }, /*#__PURE__*/React.createElement(View, {
-    style: tokens.layout.titleRow
-  }, titleNode, badgeNode, dotNode)));
-};
-const SidebarItem = /*#__PURE__*/React.memo(SidebarItemImpl);
-export default SidebarItem;
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var r in i)({}).hasOwnProperty.call(i,r)&&(e[r]=i[r])}return e},_extends.apply(null,arguments)}import React from"react";import{Pressable,Text,View}from"react-native";import{useAriaPress}from"../../hooks";import{isRenderable,isText}from"../../utils";import Badge from"../badge";import{useSidebarContext}from"./SidebarContext";import{useSidebarTokens}from"./tokens";const SidebarItemImpl=e=>{const{title:t,badge:i,disabled:r,dot:a,onClick:o,textStyle:l,badgeStyle:n,contentStyle:s,style:c,index:d=0,children:m,tokensOverride:b,...y}=e,u=useSidebarTokens(b),p=useSidebarContext();if(!p)return null;const g=r??u.defaults.disabled,f=p.activeIndex===d,x=g?u.colors.disabled:f?u.colors.titleActive:u.colors.title,R=useAriaPress({disabled:g,onPress:()=>{o?.(d),p.onSelect(d)},extraProps:{accessibilityRole:"tab",accessibilityState:{selected:f,disabled:g},testID:`rv-sidebar-item-${d}`}}),S=[u.layout.indicator,{width:u.sizing.indicatorWidth,borderRadius:u.sizing.indicatorWidth,backgroundColor:u.colors.indicator}],h=isRenderable(t)?isText(t)?React.createElement(Text,{style:[u.layout.title,{color:x,fontFamily:u.typography.fontFamily,fontSize:u.typography.fontSize,fontWeight:u.typography.fontWeight},l]},t):t:null,w=isRenderable(i)?React.createElement(View,{style:[u.layout.badge,n]},isText(i)?React.createElement(Badge,{content:i}):i):null,E=a?React.createElement(View,{style:[u.layout.dot,{backgroundColor:u.colors.indicator}]}):null;return React.createElement(Pressable,_extends({},y,R.interactionProps,{style:[u.layout.item,{height:u.sizing.itemHeight},c]}),React.createElement(View,{style:u.layout.indicatorWrapper},f&&React.createElement(View,{style:S})),React.createElement(View,{style:u.layout.itemContent},React.createElement(View,{style:u.layout.titleRow},h,w,E)))},SidebarItem=React.memo(SidebarItemImpl);export default SidebarItem;

package/dist/es/components/sidebar/index.js

@@ -1,8 +1 @@
-import SidebarBase from './Sidebar';
-import SidebarItem from './SidebarItem';
-export { useSidebarTokens } from './tokens';
-const Sidebar = Object.assign(SidebarBase, {
-  Item: SidebarItem
-});
-export { SidebarItem };
-export default Sidebar;
+import SidebarBase from"./Sidebar";import SidebarItem from"./SidebarItem";export{useSidebarTokens}from"./tokens";const Sidebar=Object.assign(SidebarBase,{Item:SidebarItem});export{SidebarItem};export default Sidebar;

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

@@ -1,80 +1 @@
-import { StyleSheet } from 'react-native';
-import { createComponentTokensHook } from '../../design-system';
-export const createSidebarTokens = foundations => {
-  const {
-    palette,
-    fontSize,
-    typography
-  } = foundations;
-  const borderWidth = 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
-    }
-  };
-};
-export const useSidebarTokens = createComponentTokensHook('sidebar', createSidebarTokens);
+import{StyleSheet}from"react-native";import{createComponentTokensHook}from"../../design-system";export const createSidebarTokens=e=>{const{palette:t,fontSize:i,typography:o}=e,n=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:"#ffffff",border:t.default[200],title:t.default[800],titleActive:t.primary[600],disabled:t.default[400],indicator:t.primary[600]},typography:{fontFamily:o.fontFamily,fontSize:i.sm,fontWeight:o.weight.medium,contentFontSize:i.sm},sizing:{width:120,itemHeight:48,indicatorWidth:4},borders:{width:n}}};export const useSidebarTokens=createComponentTokensHook("sidebar",createSidebarTokens);

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

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

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

@@ -1,4 +1 @@
-import Skeleton from './Skeleton';
-export { useSkeletonTokens } from './tokens';
-export default Skeleton;
-export { Skeleton };
+import Skeleton from"./Skeleton";export{useSkeletonTokens}from"./tokens";export default Skeleton;export{Skeleton};

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

@@ -1,33 +1 @@
-import { createComponentTokensHook } from '../../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
-    }
-  };
-};
-export const useSkeletonTokens = createComponentTokensHook('skeleton', createTokens);
+import{createComponentTokensHook}from"../../design-system";const createTokens=t=>{const{palette:o,spacing:e,radii:n}=t;return{defaults:{rowCount:3,rowWidth:"100%",lastRowWidth:"60%",rowHeight:16,avatarSize:32,titleWidth:"40%"},colors:{block:o.default[100],highlight:"#ffffff"},radius:n.sm,spacing:{containerGap:12,rowGap:e.xs},animation:{duration:1200,minOpacity:.3,maxOpacity:.85}}};export const useSkeletonTokens=createComponentTokensHook("skeleton",createTokens);