react-native-system-ui 1.0.1 → 1.0.3

package/dist/es/components/tabbar/Tabbar.js

@@ -1,130 +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, { useCallback, useMemo, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
-import { mergeTokensOverride } from '../../design-system';
-import { useControllableValue } from '../../hooks';
-import { createHairlineView } from '../../utils/hairline';
-import { SafeAreaView } from '../safe-area-view';
-import { TabbarContext } from './TabbarContext';
-import { useTabbarTokens } from './tokens';
-const TabbarBaseImpl = props => {
-  const {
-    children,
-    value,
-    defaultValue,
-    fixed: fixedP,
-    border: borderP,
-    zIndex = 1,
-    activeColor,
-    inactiveColor,
-    background: bgP,
-    placeholder: placeP,
-    safeAreaInsetBottom,
-    iconSize: iconSzP,
-    tokensOverride,
-    style,
-    contentStyle,
-    onChange,
-    ...rest
-  } = props;
-  const tokens = useTabbarTokens(tokensOverride);
-  const fixed = fixedP ?? tokens.defaults.fixed;
-  const border = borderP ?? tokens.defaults.border;
-  const background = bgP ?? tokens.colors.background;
-  const placeholder = placeP ?? tokens.defaults.placeholder;
-  const iconSize = iconSzP ?? tokens.icon.size;
-  const enableSafeBottom = safeAreaInsetBottom ?? fixed;
-  const items = useMemo(() => React.Children.toArray(children).filter(React.isValidElement), [children]);
-  const firstName = items.length ? items[0].props.name ?? 0 : undefined;
-  const [activeValue, setActiveValue] = useControllableValue(props, {
-    defaultValue: firstName,
-    valuePropName: 'value',
-    defaultValuePropName: 'defaultValue',
-    trigger: 'onChange'
-  });
-  const itemNames = items.map((item, i) => item.props.name ?? i);
-  const currentName = activeValue === undefined || activeValue === null ? firstName : itemNames.some(n => n === activeValue) ? activeValue : firstName;
-  const [barHeight, setBarHeight] = useState(tokens.layout.height);
-  const enablePlaceholder = fixed && placeholder;
-  const handleLayout = useCallback(event => {
-    if (!enablePlaceholder) return;
-    const h = event.nativeEvent.layout.height;
-    setBarHeight(prev => Math.abs(prev - h) < 0.5 ? prev : h);
-  }, [enablePlaceholder]);
-  const onSelect = useCallback((name, index) => setActiveValue(name, index), [setActiveValue]);
-  const ctxVal = useMemo(() => ({
-    activeValue: currentName,
-    activeColor: activeColor ?? tokens.colors.active,
-    inactiveColor: inactiveColor ?? tokens.colors.inactive,
-    fontSize: tokens.typography.fontSize,
-    fontWeight: tokens.typography.fontWeight,
-    onSelect
-  }), [activeColor, currentName, inactiveColor, onSelect, tokens.colors.active, tokens.colors.inactive, tokens.typography.fontSize, tokens.typography.fontWeight]);
-  const cloned = useMemo(() => items.map((item, i) => {
-    const name = item.props.name ?? i;
-    return /*#__PURE__*/React.cloneElement(item, {
-      key: item.key ?? name,
-      name,
-      index: i,
-      iconSize,
-      tokensOverride: mergeTokensOverride(tokensOverride, item.props.tokensOverride)
-    });
-  }), [iconSize, items, tokensOverride]);
-  if (items.length === 0) return null;
-  const ContainerWrap = enableSafeBottom ? SafeAreaView : View;
-  const placeStyle = {
-    height: barHeight
-  };
-  const ctrStyle = [S.c, fixed && [S.f, {
-    zIndex
-  }], style];
-  const barStyle = [S.b, {
-    backgroundColor: background,
-    paddingHorizontal: tokens.layout.paddingHorizontal,
-    minHeight: tokens.layout.height
-  }, contentStyle];
-  const rowStyle = [S.r, {
-    minHeight: tokens.layout.height
-  }];
-  return /*#__PURE__*/React.createElement(React.Fragment, null, enablePlaceholder && /*#__PURE__*/React.createElement(View, {
-    testID: "rv-tabbar-placeholder",
-    style: placeStyle
-  }), /*#__PURE__*/React.createElement(View, _extends({}, rest, {
-    style: ctrStyle,
-    onLayout: handleLayout
-  }), /*#__PURE__*/React.createElement(ContainerWrap, {
-    style: barStyle
-  }, /*#__PURE__*/React.createElement(TabbarContext.Provider, {
-    value: ctxVal
-  }, /*#__PURE__*/React.createElement(View, {
-    style: rowStyle,
-    accessibilityRole: "tablist"
-  }, cloned)), border && /*#__PURE__*/React.createElement(View, {
-    style: createHairlineView({
-      position: 'top',
-      color: tokens.colors.border,
-      left: 0,
-      right: 0
-    })
-  }))));
-};
-const S = StyleSheet.create({
-  c: {
-    width: '100%'
-  },
-  b: {
-    width: '100%'
-  },
-  r: {
-    flexDirection: 'row'
-  },
-  f: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    bottom: 0
-  }
-});
-const TabbarBase = /*#__PURE__*/React.memo(TabbarBaseImpl);
-TabbarBase.displayName = 'Tabbar';
-export default TabbarBase;
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var o in a)({}).hasOwnProperty.call(a,o)&&(e[o]=a[o])}return e},_extends.apply(null,arguments)}import React,{useCallback,useMemo,useState}from"react";import{StyleSheet,View}from"react-native";import{mergeTokensOverride}from"../../design-system";import{useControllableValue}from"../../hooks";import{createHairlineView}from"../../utils/hairline";import{SafeAreaView}from"../safe-area-view";import{TabbarContext}from"./TabbarContext";import{useTabbarTokens}from"./tokens";const TabbarBaseImpl=e=>{const{children:t,value:a,defaultValue:o,fixed:r,border:l,zIndex:i=1,activeColor:n,inactiveColor:s,background:c,placeholder:u,safeAreaInsetBottom:m,iconSize:b,tokensOverride:d,style:p,contentStyle:f,onChange:h,...g}=e,y=useTabbarTokens(d),v=r??y.defaults.fixed,V=l??y.defaults.border,k=c??y.colors.background,C=u??y.defaults.placeholder,w=b??y.icon.size,T=m??v,x=useMemo(()=>React.Children.toArray(t).filter(React.isValidElement),[t]),R=x.length?x[0].props.name??0:void 0,[z,E]=useControllableValue(e,{defaultValue:R,valuePropName:"value",defaultValuePropName:"defaultValue",trigger:"onChange"}),O=x.map((e,t)=>e.props.name??t),B=null==z?R:O.some(e=>e===z)?z:R,[H,I]=useState(y.layout.height),M=v&&C,A=useCallback(e=>{if(!M)return;const t=e.nativeEvent.layout.height;I(e=>Math.abs(e-t)<.5?e:t)},[M]),P=useCallback((e,t)=>E(e,t),[E]),_=useMemo(()=>({activeValue:B,activeColor:n??y.colors.active,inactiveColor:s??y.colors.inactive,fontSize:y.typography.fontSize,fontWeight:y.typography.fontWeight,onSelect:P}),[n,B,s,P,y.colors.active,y.colors.inactive,y.typography.fontSize,y.typography.fontWeight]),N=useMemo(()=>x.map((e,t)=>{const a=e.props.name??t;return React.cloneElement(e,{key:e.key??a,name:a,index:t,iconSize:w,tokensOverride:mergeTokensOverride(d,e.props.tokensOverride)})}),[w,x,d]);if(0===x.length)return null;const W=T?SafeAreaView:View,j={height:H},D=[S.c,v&&[S.f,{zIndex:i}],p],F=[S.b,{backgroundColor:k,paddingHorizontal:y.layout.paddingHorizontal,minHeight:y.layout.height},f],L=[S.r,{minHeight:y.layout.height}];return React.createElement(React.Fragment,null,M&&React.createElement(View,{testID:"rv-tabbar-placeholder",style:j}),React.createElement(View,_extends({},g,{style:D,onLayout:A}),React.createElement(W,{style:F},React.createElement(TabbarContext.Provider,{value:_},React.createElement(View,{style:L,accessibilityRole:"tablist"},N)),V&&React.createElement(View,{style:createHairlineView({position:"top",color:y.colors.border,left:0,right:0})}))))},S=StyleSheet.create({c:{width:"100%"},b:{width:"100%"},r:{flexDirection:"row"},f:{position:"absolute",left:0,right:0,bottom:0}}),TabbarBase=React.memo(TabbarBaseImpl);TabbarBase.displayName="Tabbar";export default TabbarBase;

package/dist/es/components/tabbar/TabbarContext.js

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

package/dist/es/components/tabbar/TabbarItem.js

@@ -1,133 +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, { useCallback } from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
-import { useAriaPress } from '../../hooks';
-import { isFunction, isPlainObject, isRenderable, isText } from '../../utils/validate';
-import Badge from '../badge';
-import { useTabbarContext } from './TabbarContext';
-import { useTabbarTokens } from './tokens';
-const TabbarItemImpl = p => {
-  const {
-    name,
-    icon,
-    badge,
-    dot = false,
-    onClick,
-    textStyle,
-    iconStyle,
-    children,
-    disabled = false,
-    style,
-    index,
-    testID,
-    iconSize,
-    tokensOverride,
-    ...rest
-  } = p;
-  const t = useTabbarTokens(tokensOverride);
-  const ctx = useTabbarContext();
-  if (!ctx) return null;
-  const in_ = name ?? index ?? 0;
-  const ia = ctx.activeValue === in_;
-  const c = ia ? ctx.activeColor : ctx.inactiveColor;
-  const ris = iconSize ?? t.icon.size;
-  const ait = useCallback(n => {
-    if (! /*#__PURE__*/React.isValidElement(n)) return n;
-    const e = n;
-    const np = {};
-    const pr = e.props ?? {};
-    if (pr['size'] == null) np['size'] = ris;
-    if (pr['fill'] == null) np['fill'] = c;
-    if (pr['color'] == null) np['color'] = c;
-    if (pr['style'] != null) np['style'] = [pr['style'], {
-      color: c
-    }];
-    return /*#__PURE__*/React.cloneElement(e, np);
-  }, [c, ris]);
-  const ri = useCallback(() => {
-    if (!icon) return null;
-    const r = isFunction(icon) ? icon(ia) : icon;
-    return ait(r);
-  }, [ait, icon, ia]);
-  const rl = useCallback(() => isFunction(children) ? children(ia) : children, [children, ia]);
-  const ap = useAriaPress({
-    disabled,
-    onPress: () => {
-      if (!disabled) {
-        onClick?.();
-        ctx.onSelect(in_, index ?? 0);
-      }
-    },
-    extraProps: {
-      accessibilityRole: 'tab',
-      accessibilityState: {
-        selected: ia,
-        disabled
-      },
-      testID: testID ?? `rv-tabbar-item-${in_}`
-    }
-  });
-  const srb = dot || isRenderable(badge);
-  const rb = useCallback(() => {
-    if (isRenderable(badge)) {
-      if (isText(badge)) return /*#__PURE__*/React.createElement(Badge, {
-        content: badge
-      });
-      if (isPlainObject(badge)) {
-        const bp = badge;
-        return /*#__PURE__*/React.createElement(Badge, _extends({}, bp, {
-          dot: dot || bp.dot
-        }));
-      }
-      ;
-      return badge;
-    }
-    ;
-    return /*#__PURE__*/React.createElement(Badge, {
-      dot: true
-    });
-  }, [badge, dot]);
-  const is_ = [S.i, {
-    height: t.layout.height,
-    paddingVertical: t.layout.paddingVertical,
-    opacity: disabled ? 0.5 : 1
-  }, style];
-  const ls = [S.l, {
-    color: c,
-    fontSize: ctx.fontSize,
-    fontWeight: ctx.fontWeight,
-    lineHeight: ctx.fontSize
-  }, textStyle];
-  return /*#__PURE__*/React.createElement(Pressable, _extends({}, rest, ap.interactionProps, {
-    style: is_
-  }), /*#__PURE__*/React.createElement(View, {
-    style: [S.iw, iconStyle]
-  }, ri(), srb && /*#__PURE__*/React.createElement(View, {
-    style: S.b
-  }, rb())), isRenderable(children) ? /*#__PURE__*/React.createElement(Text, {
-    style: ls
-  }, rl()) : null);
-};
-const S = StyleSheet.create({
-  i: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: 4
-  },
-  iw: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  b: {
-    position: 'absolute',
-    top: -4,
-    right: -12
-  },
-  l: {
-    includeFontPadding: false
-  }
-});
-const TabbarItem = /*#__PURE__*/React.memo(TabbarItemImpl);
-TabbarItem.displayName = 'Tabbar.Item';
-export default TabbarItem;
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},_extends.apply(null,arguments)}import React,{useCallback}from"react";import{Pressable,StyleSheet,Text,View}from"react-native";import{useAriaPress}from"../../hooks";import{isFunction,isPlainObject,isRenderable,isText}from"../../utils/validate";import Badge from"../badge";import{useTabbarContext}from"./TabbarContext";import{useTabbarTokens}from"./tokens";const TabbarItemImpl=e=>{const{name:t,icon:a,badge:n,dot:i=!1,onClick:r,textStyle:l,iconStyle:s,children:o,disabled:c=!1,style:b,index:u,testID:d,iconSize:m,tokensOverride:f,...p}=e,y=useTabbarTokens(f),g=useTabbarContext();if(!g)return null;const x=t??u??0,T=g.activeValue===x,R=T?g.activeColor:g.inactiveColor,h=m??y.icon.size,C=useCallback(e=>{if(isText(e))return React.createElement(Text,{style:{color:R,fontSize:h}},e);if(!React.isValidElement(e))return e;const t=e,a={},n=t.props??{};return null==n.size&&(a.size=h),null==n.fill&&(a.fill=R),null==n.color&&(a.color=R),null!=n.style&&(a.style=[n.style,{color:R}]),React.cloneElement(t,a)},[R,h]),I=useCallback(()=>{if(!a)return null;const e=isFunction(a)?a(T):a;return C(e)},[C,a,T]),k=useCallback(()=>isFunction(o)?o(T):o,[o,T]),P=useAriaPress({disabled:c,onPress:()=>{c||(r?.(),g.onSelect(x,u??0))},extraProps:{accessibilityRole:"tab",accessibilityState:{selected:T,disabled:c},testID:d??`rv-tabbar-item-${x}`}}),v=i||isRenderable(n),E=useCallback(()=>{if(isRenderable(n)){if(isText(n))return React.createElement(Badge,{content:n});if(isPlainObject(n)){const e=n;return React.createElement(Badge,_extends({},e,{dot:i||e.dot}))}return n}return React.createElement(Badge,{dot:!0})},[n,i]),z=[S.i,{height:y.layout.height,paddingVertical:y.layout.paddingVertical,opacity:c?.5:1},b],V=[S.l,{color:R,fontSize:g.fontSize,fontWeight:g.fontWeight,lineHeight:g.fontSize},l];return React.createElement(Pressable,_extends({},p,P.interactionProps,{style:z}),React.createElement(View,{style:[S.iw,s]},I(),v&&React.createElement(View,{style:S.b},E())),isRenderable(o)?React.createElement(Text,{style:V},k()):null)},S=StyleSheet.create({i:{flex:1,alignItems:"center",justifyContent:"center",gap:4},iw:{alignItems:"center",justifyContent:"center"},b:{position:"absolute",top:-4,right:-12},l:{includeFontPadding:!1}}),TabbarItem=React.memo(TabbarItemImpl);TabbarItem.displayName="Tabbar.Item";export default TabbarItem;

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

@@ -1,7 +1 @@
-import TabbarBase from './Tabbar';
-import TabbarItem from './TabbarItem';
-export { useTabbarTokens } from './tokens';
-const Tabbar = TabbarBase;
-Tabbar.Item = TabbarItem;
-export { TabbarItem };
-export default Tabbar;
+import TabbarBase from"./Tabbar";import TabbarItem from"./TabbarItem";export{useTabbarTokens}from"./tokens";const Tabbar=TabbarBase;Tabbar.Item=TabbarItem;export{TabbarItem};export default Tabbar;

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

@@ -1,35 +1 @@
-import { createComponentTokensHook } from '../../design-system';
-const createTokens = foundations => {
-  const {
-    palette,
-    spacing,
-    fontSize
-  } = foundations;
-  return {
-    defaults: {
-      fixed: true,
-      border: true,
-      placeholder: false,
-      safeAreaInsetBottom: false
-    },
-    colors: {
-      background: '#ffffff',
-      border: palette.default[200],
-      active: palette.primary[600],
-      inactive: palette.default[600]
-    },
-    layout: {
-      height: 50,
-      paddingHorizontal: 0,
-      paddingVertical: spacing.xs
-    },
-    icon: {
-      size: 22
-    },
-    typography: {
-      fontSize: fontSize.sm,
-      fontWeight: '400'
-    }
-  };
-};
-export const useTabbarTokens = createComponentTokensHook('tabbar', createTokens);
+import{createComponentTokensHook}from"../../design-system";const createTokens=e=>{const{palette:o,spacing:t,fontSize:a}=e;return{defaults:{fixed:!0,border:!0,placeholder:!1,safeAreaInsetBottom:!1},colors:{background:"#ffffff",border:o.default[200],active:o.primary[600],inactive:o.default[600]},layout:{height:50,paddingHorizontal:0,paddingVertical:t.xs},icon:{size:22},typography:{fontSize:a.sm,fontWeight:"400"}}};export const useTabbarTokens=createComponentTokensHook("tabbar",createTokens);