react-native-system-ui 1.0.2 → 1.0.4

package/dist/es/components/input/Input.js

@@ -1,109 +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, useImperativeHandle, useMemo, useRef } from 'react';
-import { isBoolean, isFiniteNumber } from '../../utils/validate';
-import Field from '../field';
-import { useFieldTokens } from '../field/tokens';
-import { useInputTokens } from './tokens';
-const mapKeyboardType = t => {
-  switch (t) {
-    case 'number':
-      return 'decimal-pad';
-    case 'digit':
-      return 'number-pad';
-    case 'tel':
-      return 'phone-pad';
-    default:
-      return undefined;
-  }
-};
-const InputImpl = (props, ref) => {
-  const {
-    type,
-    keyboardType: keyboardTypeProp,
-    align: alignProp,
-    inputAlign: inputAlignProp,
-    clearTrigger: clearTriggerProp,
-    onChange,
-    onChangeText,
-    showWordLimit,
-    style,
-    inputStyle,
-    fieldTokensOverride,
-    tokensOverride,
-    ...rest
-  } = props;
-  const tokens = useInputTokens(tokensOverride);
-  const inputRef = useRef(null);
-  const onChangeRef = useRef(onChange);
-  const onChangeTextRef = useRef(onChangeText);
-  onChangeRef.current = onChange;
-  onChangeTextRef.current = onChangeText;
-  const handleChangeText = useCallback(value => {
-    onChangeRef.current?.(value);
-    onChangeTextRef.current?.(value);
-  }, []);
-  useImperativeHandle(ref, () => ({
-    focus: () => inputRef.current?.focus?.(),
-    blur: () => inputRef.current?.blur?.(),
-    clear: () => inputRef.current?.clear?.(),
-    get nativeElement() {
-      return inputRef.current?.nativeElement ?? null;
-    }
-  }), []);
-  const rAlign = alignProp ?? inputAlignProp ?? tokens.defaults.inputAlign;
-  const rClearTrigger = clearTriggerProp ?? tokens.defaults.clearTrigger;
-  const rKeyboardType = keyboardTypeProp ?? mapKeyboardType(type);
-  const fieldStyle = [{
-    paddingHorizontal: tokens.spacing.paddingHorizontal,
-    paddingVertical: tokens.spacing.paddingVertical,
-    backgroundColor: tokens.colors.background
-  }, style];
-  return /*#__PURE__*/React.createElement(Field, _extends({
-    ref: inputRef
-  }, rest, {
-    type: type,
-    keyboardType: rKeyboardType,
-    tokensOverride: fieldTokensOverride,
-    border: tokens.defaults.border,
-    inputAlign: rAlign,
-    clearTrigger: rClearTrigger,
-    style: fieldStyle,
-    inputStyle: inputStyle,
-    showWordLimit: showWordLimit,
-    onChangeText: handleChangeText
-  }));
-};
-const InputForwardRef = /*#__PURE__*/React.forwardRef(InputImpl);
-InputForwardRef.displayName = 'Input';
-const InputComponent = /*#__PURE__*/React.memo(InputForwardRef);
-const TextAreaImpl = (props, ref) => {
-  const {
-    autoSize: autoSizeProp,
-    ...rest
-  } = props;
-  const fieldTokens = useFieldTokens(rest.fieldTokensOverride);
-  const lh = fieldTokens.defaults.textareaLineHeight;
-  const toRows = useCallback(height => !isFiniteNumber(height) || height <= 0 ? undefined : Math.max(1, Math.round(height / lh)), [lh]);
-  const rAutoSize = useMemo(() => !autoSizeProp || isBoolean(autoSizeProp) ? autoSizeProp : (() => {
-    const minR = toRows(autoSizeProp.minHeight);
-    const maxR = toRows(autoSizeProp.maxHeight);
-    return minR || maxR ? {
-      minRows: minR,
-      maxRows: maxR
-    } : undefined;
-  })(), [autoSizeProp, toRows]);
-  return /*#__PURE__*/React.createElement(InputComponent, _extends({
-    ref: ref
-  }, rest, {
-    type: "textarea",
-    autoSize: rAutoSize
-  }));
-};
-const TextAreaForwardRef = /*#__PURE__*/React.forwardRef(TextAreaImpl);
-TextAreaForwardRef.displayName = 'Input.TextArea';
-const TextArea = /*#__PURE__*/React.memo(TextAreaForwardRef);
-const Input = Object.assign(InputComponent, {
-  TextArea
-});
-export default Input;
-export { TextArea };
+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 n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},_extends.apply(null,arguments)}import React,{useCallback,useImperativeHandle,useMemo,useRef}from"react";import{isBoolean,isFiniteNumber}from"../../utils/validate";import Field from"../field";import{useFieldTokens}from"../field/tokens";import{useInputTokens}from"./tokens";const mapKeyboardType=e=>{switch(e){case"number":return"decimal-pad";case"digit":return"number-pad";case"tel":return"phone-pad";default:return}},InputImpl=(e,t)=>{const{type:r,keyboardType:n,align:a,inputAlign:o,clearTrigger:i,onChange:u,onChangeText:s,showWordLimit:l,style:d,inputStyle:p,fieldTokensOverride:c,tokensOverride:m,...f}=e,g=useInputTokens(m),T=useRef(null),x=useRef(u),b=useRef(s);x.current=u,b.current=s;const R=useCallback(e=>{x.current?.(e),b.current?.(e)},[]);useImperativeHandle(t,()=>({focus:()=>T.current?.focus?.(),blur:()=>T.current?.blur?.(),clear:()=>T.current?.clear?.(),get nativeElement(){return T.current?.nativeElement??null}}),[]);const I=a??o??g.defaults.inputAlign,y=i??g.defaults.clearTrigger,k=n??mapKeyboardType(r),h=[{paddingHorizontal:g.spacing.paddingHorizontal,paddingVertical:g.spacing.paddingVertical,backgroundColor:g.colors.background},d];return React.createElement(Field,_extends({ref:T},f,{type:r,keyboardType:k,tokensOverride:c,border:g.defaults.border,inputAlign:I,clearTrigger:y,style:h,inputStyle:p,showWordLimit:l,onChangeText:R}))},InputForwardRef=React.forwardRef(InputImpl);InputForwardRef.displayName="Input";const InputComponent=React.memo(InputForwardRef),TextAreaImpl=(e,t)=>{const{autoSize:r,...n}=e,a=useFieldTokens(n.fieldTokensOverride).defaults.textareaLineHeight,o=useCallback(e=>!isFiniteNumber(e)||e<=0?void 0:Math.max(1,Math.round(e/a)),[a]),i=useMemo(()=>!r||isBoolean(r)?r:(()=>{const e=o(r.minHeight),t=o(r.maxHeight);return e||t?{minRows:e,maxRows:t}:void 0})(),[r,o]);return React.createElement(InputComponent,_extends({ref:t},n,{type:"textarea",autoSize:i}))},TextAreaForwardRef=React.forwardRef(TextAreaImpl);TextAreaForwardRef.displayName="Input.TextArea";const TextArea=React.memo(TextAreaForwardRef),Input=Object.assign(InputComponent,{TextArea:TextArea});export default Input;export{TextArea};

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

@@ -1,3 +1 @@
-import Input from './Input';
-export default Input;
-export { TextArea } from './Input';
+import Input from"./Input";export default Input;export{TextArea}from"./Input";

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

@@ -1,16 +1 @@
-import { createComponentTokensHook } from '../../design-system';
-const createInputTokens = foundations => ({
-  defaults: {
-    inputAlign: 'left',
-    clearTrigger: 'focus',
-    border: true
-  },
-  spacing: {
-    paddingHorizontal: foundations.spacing.md,
-    paddingVertical: foundations.spacing.sm
-  },
-  colors: {
-    background: 'transparent'
-  }
-});
-export const useInputTokens = createComponentTokensHook('input', createInputTokens);
+import{createComponentTokensHook}from"../../design-system";const createInputTokens=n=>({defaults:{inputAlign:"left",clearTrigger:"focus",border:!0},spacing:{paddingHorizontal:n.spacing.md,paddingVertical:n.spacing.sm},colors:{background:"transparent"}});export const useInputTokens=createComponentTokensHook("input",createInputTokens);

package/dist/es/components/loading/Loading.js

@@ -1,57 +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 { ActivityIndicator, View } from 'react-native';
-import { renderTextOrNode } from '../../utils';
-import { isRenderable, isText } from '../../utils/validate';
-import { useLoadingTokens } from './tokens';
-const LoadingImpl = props => {
-  const {
-    tokensOverride,
-    color: clrP,
-    size: sizeP,
-    textSize: tsP,
-    textColor: tcP,
-    vertical: vertP,
-    accessibilityLabel: accP,
-    ['aria-label']: ariaP,
-    style,
-    textStyle,
-    contentStyle,
-    children,
-    ...rest
-  } = props;
-  const tokens = useLoadingTokens(tokensOverride);
-  const clr = clrP ?? tokens.colors.indicator;
-  const size = sizeP ?? tokens.defaults.size;
-  const ts = tsP ?? tokens.defaults.textSize;
-  const tc = tcP ?? tokens.colors.text;
-  const vert = vertP ?? tokens.defaults.vertical;
-  const acc = ariaP ?? accP ?? 'loading';
-  const ind = /*#__PURE__*/React.createElement(ActivityIndicator, {
-    testID: "rv-loading-spinner",
-    size: size,
-    color: clr,
-    accessibilityLabel: acc
-  });
-  const txtSp = {
-    marginLeft: vert ? 0 : tokens.spacing.gap,
-    marginTop: vert ? tokens.spacing.gap : 0
-  };
-  const txtNode = isRenderable(children) && /*#__PURE__*/React.createElement(View, {
-    style: isText(children) ? undefined : txtSp
-  }, renderTextOrNode(children, [tokens.layout.text, txtSp, {
-    fontSize: ts,
-    color: tc
-  }, textStyle].filter(Boolean)));
-  return /*#__PURE__*/React.createElement(View, _extends({
-    accessibilityRole: "progressbar",
-    style: [tokens.layout.container, {
-      flexDirection: vert ? 'column' : 'row',
-      justifyContent: vert ? 'center' : 'flex-start'
-    }, style]
-  }, rest), /*#__PURE__*/React.createElement(View, {
-    style: contentStyle
-  }, ind), txtNode);
-};
-export const Loading = /*#__PURE__*/React.memo(LoadingImpl);
-Loading.displayName = 'Loading';
+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{ActivityIndicator,View}from"react-native";import{renderTextOrNode}from"../../utils";import{isRenderable,isText}from"../../utils/validate";import{useLoadingTokens}from"./tokens";const LoadingImpl=e=>{const{tokensOverride:t,color:i,size:r,textSize:o,textColor:a,vertical:n,accessibilityLabel:l,"aria-label":s,style:c,textStyle:d,contentStyle:m,children:g,...p}=e,f=useLoadingTokens(t),u=i??f.colors.indicator,x=r??f.defaults.size,y=o??f.defaults.textSize,b=a??f.colors.text,v=n??f.defaults.vertical,L=s??l??"loading",R=React.createElement(ActivityIndicator,{testID:"rv-loading-spinner",size:x,color:u,accessibilityLabel:L}),T={marginLeft:v?0:f.spacing.gap,marginTop:v?f.spacing.gap:0},w=isRenderable(g)&&React.createElement(View,{style:isText(g)?void 0:T},renderTextOrNode(g,[f.layout.text,T,{fontSize:y,color:b},d].filter(Boolean)));return React.createElement(View,_extends({accessibilityRole:"progressbar",style:[f.layout.container,{flexDirection:v?"column":"row",justifyContent:v?"center":"flex-start"},c]},p),React.createElement(View,{style:m},R),w)};export const Loading=React.memo(LoadingImpl);Loading.displayName="Loading";

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

@@ -1,2 +1 @@
-import { Loading } from './Loading';
-export default Loading;
+import{Loading}from"./Loading";export default Loading;

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

@@ -1,25 +1 @@
-import { createComponentTokensHook } from '../../design-system';
-export const createLoadingTokens = foundations => ({
-  defaults: {
-    size: 30,
-    textSize: foundations.fontSize.sm,
-    vertical: false
-  },
-  layout: {
-    container: {
-      alignItems: 'center'
-    },
-    text: {
-      includeFontPadding: false,
-      textAlignVertical: 'center'
-    }
-  },
-  colors: {
-    indicator: foundations.palette.default[400],
-    text: foundations.palette.default[500]
-  },
-  spacing: {
-    gap: foundations.spacing.sm
-  }
-});
-export const useLoadingTokens = createComponentTokensHook('loading', createLoadingTokens);
+import{createComponentTokensHook}from"../../design-system";export const createLoadingTokens=e=>({defaults:{size:30,textSize:e.fontSize.sm,vertical:!1},layout:{container:{alignItems:"center"},text:{includeFontPadding:!1,textAlignVertical:"center"}},colors:{indicator:e.palette.default[400],text:e.palette.default[500]},spacing:{gap:e.spacing.sm}});export const useLoadingTokens=createComponentTokensHook("loading",createLoadingTokens);

package/dist/es/components/nav-bar/NavBar.js

@@ -1,171 +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, useState } from 'react';
-import { Pressable, Text, View } from 'react-native';
-import { ArrowLeft } from 'react-native-system-icon';
-import { useAriaPress } from '../../hooks';
-import { useLocale } from '../config-provider/useLocale';
-import { useDirection } from '../config-provider/useDirection';
-import { createHairlineView } from '../../utils/hairline';
-import { isRenderable, isText, renderTextOrNode } from '../../utils';
-import { SafeAreaView } from '../safe-area-view';
-import { useNavBarTokens } from './tokens';
-const NavBarBaseImpl = props => {
-  const {
-    tokensOverride,
-    title,
-    description,
-    children,
-    leftText,
-    rightText,
-    leftIcon,
-    rightIcon,
-    leftArrow: leftArrP,
-    fixed: fixedP,
-    placeholder: placeP,
-    zIndex: zIdxP,
-    border: borderP,
-    safeAreaInsetTop: safeTopP,
-    background: bgP,
-    tintColor,
-    titleStyle,
-    descriptionStyle,
-    sideStyle,
-    onPressLeft,
-    onClickLeft,
-    onPressRight,
-    onClickRight,
-    style,
-    ...rest
-  } = props;
-  const locale = useLocale();
-  const dir = useDirection();
-  const tokens = useNavBarTokens(tokensOverride);
-  const leftArrow = leftArrP ?? tokens.defaults.leftArrow;
-  const fixed = fixedP ?? tokens.defaults.fixed;
-  const placeholder = placeP ?? tokens.defaults.placeholder;
-  const zIndex = zIdxP ?? tokens.defaults.zIndex;
-  const border = borderP ?? tokens.defaults.border;
-  const safeAreaInsetTop = safeTopP ?? fixed;
-  const background = bgP ?? tokens.colors.background;
-  const handlePressLeft = onPressLeft ?? onClickLeft;
-  const handlePressRight = onPressRight ?? onClickRight;
-  const [height, setHeight] = useState(tokens.sizing.height);
-  const enablePlaceholder = fixed && placeholder;
-  const handleLayout = useCallback(event => {
-    if (!enablePlaceholder) return;
-    const nextH = event.nativeEvent.layout.height;
-    setHeight(prev => Math.abs(prev - nextH) < 0.5 ? prev : nextH);
-  }, [enablePlaceholder]);
-  const resolvedColor = tintColor ?? tokens.colors.text;
-  const sideColor = tintColor ?? tokens.colors.icon;
-  const leftPress = useAriaPress({
-    disabled: !handlePressLeft,
-    onPress: handlePressLeft,
-    extraProps: {
-      accessibilityRole: 'button',
-      accessibilityLabel: isText(leftText) ? `${leftText}` : locale?.vanNavBar?.back ?? 'Back'
-    }
-  });
-  const rightPress = useAriaPress({
-    disabled: !handlePressRight,
-    onPress: handlePressRight,
-    extraProps: {
-      accessibilityRole: 'button',
-      accessibilityLabel: isText(rightText) ? `${rightText}` : locale?.vanNavBar?.action ?? 'Actions'
-    }
-  });
-  const renderSide = side => {
-    const isLeft = side === 'left';
-    const sideText = isLeft ? leftText : rightText;
-    const sideIcon = isLeft ? leftIcon : rightIcon;
-    const press = isLeft ? leftPress : rightPress;
-    const handler = isLeft ? handlePressLeft : handlePressRight;
-    const arrowNode = isLeft ? leftArrow === true ? /*#__PURE__*/React.createElement(ArrowLeft, {
-      size: 18,
-      fill: sideColor,
-      color: sideColor,
-      style: dir === 'rtl' ? {
-        transform: [{
-          scaleX: -1
-        }]
-      } : undefined
-    }) : isRenderable(leftArrow) && leftArrow : null;
-    const hasAction = !!handler || isRenderable(arrowNode) || isRenderable(sideText) || isRenderable(sideIcon);
-    if (!hasAction) return /*#__PURE__*/React.createElement(View, {
-      style: tokens.layout.sidePlaceholder
-    });
-    const content = /*#__PURE__*/React.createElement(React.Fragment, null, arrowNode, isRenderable(sideIcon) ? sideIcon : null, isRenderable(sideText) ? isText(sideText) ? /*#__PURE__*/React.createElement(Text, {
-      numberOfLines: 1,
-      style: [tokens.layout.sideText, {
-        color: sideColor,
-        fontFamily: tokens.typography.fontFamily
-      }]
-    }, sideText) : sideText : null);
-    const sideStyles = [tokens.layout.side, !isLeft && tokens.layout.rightAlign, sideStyle];
-    if (!handler) return /*#__PURE__*/React.createElement(View, {
-      testID: `rv-navbar-${side}`,
-      style: sideStyles
-    }, content);
-    return /*#__PURE__*/React.createElement(Pressable, _extends({
-      hitSlop: {
-        top: 8,
-        right: 8,
-        bottom: 8,
-        left: 8
-      },
-      testID: `rv-navbar-${side}`,
-      style: sideStyles
-    }, press.interactionProps), content);
-  };
-  const centerContent = isRenderable(children) ? children : /*#__PURE__*/React.createElement(View, {
-    style: tokens.layout.titleWrapper
-  }, isRenderable(title) && renderTextOrNode(title, [tokens.layout.title, {
-    color: resolvedColor,
-    fontFamily: tokens.typography.fontFamily,
-    fontSize: tokens.typography.titleSize,
-    fontWeight: tokens.typography.titleWeight
-  }, titleStyle], {
-    numberOfLines: 1
-  }), isRenderable(description) && renderTextOrNode(description, [tokens.layout.description, {
-    color: tintColor ?? tokens.colors.description,
-    fontFamily: tokens.typography.fontFamily,
-    fontSize: tokens.typography.descriptionSize
-  }, descriptionStyle], {
-    numberOfLines: 1
-  }));
-  const navbarBar = /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.bar, {
-      backgroundColor: background
-    }],
-    onLayout: safeAreaInsetTop ? undefined : handleLayout
-  }, renderSide('left'), /*#__PURE__*/React.createElement(View, {
-    style: tokens.layout.center
-  }, centerContent), renderSide('right'), border && /*#__PURE__*/React.createElement(View, {
-    style: createHairlineView({
-      position: 'bottom',
-      color: tokens.colors.border,
-      left: 0,
-      right: 0
-    })
-  }));
-  const wrappedBar = safeAreaInsetTop ? /*#__PURE__*/React.createElement(SafeAreaView, {
-    onLayout: handleLayout,
-    style: {
-      backgroundColor: background
-    }
-  }, navbarBar) : navbarBar;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, enablePlaceholder && /*#__PURE__*/React.createElement(View, {
-    testID: "rv-navbar-placeholder",
-    style: {
-      height
-    }
-  }), /*#__PURE__*/React.createElement(View, _extends({}, rest, {
-    accessibilityRole: 'navigation',
-    style: [tokens.layout.container, fixed && [tokens.layout.fixed, {
-      zIndex
-    }], style]
-  }), wrappedBar));
-};
-const NavBarBase = /*#__PURE__*/React.memo(NavBarBaseImpl);
-NavBarBase.displayName = 'NavBar';
-export default NavBarBase;
+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)}import React,{useCallback,useState}from"react";import{Pressable,Text,View}from"react-native";import{ArrowLeft}from"react-native-system-icon";import{useAriaPress}from"../../hooks";import{useLocale}from"../config-provider/useLocale";import{useDirection}from"../config-provider/useDirection";import{createHairlineView}from"../../utils/hairline";import{isRenderable,isText,renderTextOrNode}from"../../utils";import{SafeAreaView}from"../safe-area-view";import{useNavBarTokens}from"./tokens";const NavBarBaseImpl=e=>{const{tokensOverride:t,title:r,description:a,children:o,leftText:i,rightText:l,leftIcon:s,rightIcon:n,leftArrow:c,fixed:d,placeholder:u,zIndex:f,border:y,safeAreaInsetTop:m,background:p,tintColor:b,titleStyle:g,descriptionStyle:h,sideStyle:R,onPressLeft:v,onClickLeft:x,onPressRight:w,onClickRight:B,style:k,...E}=e,T=useLocale(),L=useDirection(),N=useNavBarTokens(t),P=c??N.defaults.leftArrow,V=d??N.defaults.fixed,A=u??N.defaults.placeholder,S=f??N.defaults.zIndex,I=y??N.defaults.border,O=m??V,z=p??N.colors.background,F=v??x,C=w??B,[D,_]=useState(N.sizing.height),$=V&&A,W=useCallback(e=>{if(!$)return;const t=e.nativeEvent.layout.height;_(e=>Math.abs(e-t)<.5?e:t)},[$]),j=b??N.colors.text,H=b??N.colors.icon,M=useAriaPress({disabled:!F,onPress:F,extraProps:{accessibilityRole:"button",accessibilityLabel:isText(i)?`${i}`:T?.vanNavBar?.back??"Back"}}),X=useAriaPress({disabled:!C,onPress:C,extraProps:{accessibilityRole:"button",accessibilityLabel:isText(l)?`${l}`:T?.vanNavBar?.action??"Actions"}}),q=e=>{const t="left"===e,r=t?i:l,a=t?s:n,o=t?M:X,c=t?F:C,d=t?!0===P?React.createElement(ArrowLeft,{size:18,fill:H,color:H,style:"rtl"===L?{transform:[{scaleX:-1}]}:void 0}):isRenderable(P)&&P:null;if(!(!!c||isRenderable(d)||isRenderable(r)||isRenderable(a)))return React.createElement(View,{style:N.layout.sidePlaceholder});const u=React.createElement(React.Fragment,null,d,isRenderable(a)?a:null,isRenderable(r)?isText(r)?React.createElement(Text,{numberOfLines:1,style:[N.layout.sideText,{color:H,fontFamily:N.typography.fontFamily}]},r):r:null),f=[N.layout.side,!t&&N.layout.rightAlign,R];return c?React.createElement(Pressable,_extends({hitSlop:{top:8,right:8,bottom:8,left:8},testID:`rv-navbar-${e}`,style:f},o.interactionProps),u):React.createElement(View,{testID:`rv-navbar-${e}`,style:f},u)},G=isRenderable(o)?o:React.createElement(View,{style:N.layout.titleWrapper},isRenderable(r)&&renderTextOrNode(r,[N.layout.title,{color:j,fontFamily:N.typography.fontFamily,fontSize:N.typography.titleSize,fontWeight:N.typography.titleWeight},g],{numberOfLines:1}),isRenderable(a)&&renderTextOrNode(a,[N.layout.description,{color:b??N.colors.description,fontFamily:N.typography.fontFamily,fontSize:N.typography.descriptionSize},h],{numberOfLines:1})),J=React.createElement(View,{style:[N.layout.bar,{backgroundColor:z}],onLayout:O?void 0:W},q("left"),React.createElement(View,{style:N.layout.center},G),q("right"),I&&React.createElement(View,{style:createHairlineView({position:"bottom",color:N.colors.border,left:0,right:0})})),K=O?React.createElement(SafeAreaView,{onLayout:W,style:{backgroundColor:z}},J):J;return React.createElement(React.Fragment,null,$&&React.createElement(View,{testID:"rv-navbar-placeholder",style:{height:D}}),React.createElement(View,_extends({},E,{accessibilityRole:"navigation",style:[N.layout.container,V&&[N.layout.fixed,{zIndex:S}],k]}),K))},NavBarBase=React.memo(NavBarBaseImpl);NavBarBase.displayName="NavBar";export default NavBarBase;

package/dist/es/components/nav-bar/index.js

@@ -1,3 +1 @@
-import NavBarBase from './NavBar';
-export { useNavBarTokens } from './tokens';
-export default NavBarBase;
+import NavBarBase from"./NavBar";export{useNavBarTokens}from"./tokens";export default NavBarBase;

package/dist/es/components/nav-bar/tokens.js

@@ -1,83 +1 @@
-import { createComponentTokensHook } from '../../design-system';
-export const createNavBarTokens = ({
-  palette,
-  spacing,
-  fontSize,
-  typography
-}) => {
-  return {
-    defaults: {
-      fixed: false,
-      placeholder: false,
-      border: true,
-      safeAreaInsetTop: false,
-      leftArrow: false,
-      zIndex: 1
-    },
-    layout: {
-      container: {
-        width: '100%'
-      },
-      bar: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        minHeight: 48,
-        paddingHorizontal: spacing.md
-      },
-      center: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingHorizontal: 12
-      },
-      side: {
-        minWidth: 60,
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4
-      },
-      rightAlign: {
-        justifyContent: 'flex-end'
-      },
-      sidePlaceholder: {
-        minWidth: 60
-      },
-      sideText: {
-        fontSize: 16
-      },
-      titleWrapper: {
-        alignItems: 'center'
-      },
-      title: {
-        includeFontPadding: false
-      },
-      description: {
-        marginTop: 2,
-        includeFontPadding: false
-      },
-      fixed: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0
-      }
-    },
-    colors: {
-      background: '#ffffff',
-      text: palette.default[900],
-      description: palette.default[500],
-      border: palette.default[200],
-      icon: palette.default[700]
-    },
-    typography: {
-      fontFamily: typography.fontFamily,
-      titleSize: fontSize.lg,
-      titleWeight: '600',
-      descriptionSize: fontSize.sm
-    },
-    sizing: {
-      height: 52
-    }
-  };
-};
-export const useNavBarTokens = createComponentTokensHook('navBar', createNavBarTokens);
+import{createComponentTokensHook}from"../../design-system";export const createNavBarTokens=e=>{const{palette:t,spacing:n,fontSize:i,typography:o}=e,r=e.surface??"#ffffff";return{defaults:{fixed:!1,placeholder:!1,border:!0,safeAreaInsetTop:!1,leftArrow:!1,zIndex:1},layout:{container:{width:"100%"},bar:{flexDirection:"row",alignItems:"center",minHeight:48,paddingHorizontal:n.md},center:{flex:1,alignItems:"center",justifyContent:"center",paddingHorizontal:12},side:{minWidth:60,flexDirection:"row",alignItems:"center",gap:4},rightAlign:{justifyContent:"flex-end"},sidePlaceholder:{minWidth:60},sideText:{fontSize:16},titleWrapper:{alignItems:"center"},title:{includeFontPadding:!1},description:{marginTop:2,includeFontPadding:!1},fixed:{position:"absolute",top:0,left:0,right:0}},colors:{background:r,text:t.default[900],description:t.default[500],border:t.default[200],icon:t.default[700]},typography:{fontFamily:o.fontFamily,titleSize:i.lg,titleWeight:"600",descriptionSize:i.sm},sizing:{height:52}}};export const useNavBarTokens=createComponentTokensHook("navBar",createNavBarTokens);