react-native-system-ui 1.0.1 → 1.0.3

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

@@ -1,122 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TextArea = void 0;
-function _react() {
-  const data = _interopRequireWildcard(require("react"));
-  _react = function () {
-    return data;
-  };
-  return data;
-}
-var _validate = require("../../utils/validate");
-var _field = _interopRequireDefault(require("../field"));
-var _tokens = require("../field/tokens");
-var _tokens2 = require("./tokens");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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 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 = (0, _tokens2.useInputTokens)(tokensOverride);
-  const inputRef = (0, _react().useRef)(null);
-  const onChangeRef = (0, _react().useRef)(onChange);
-  const onChangeTextRef = (0, _react().useRef)(onChangeText);
-  onChangeRef.current = onChange;
-  onChangeTextRef.current = onChangeText;
-  const handleChangeText = (0, _react().useCallback)(value => {
-    onChangeRef.current?.(value);
-    onChangeTextRef.current?.(value);
-  }, []);
-  (0, _react().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().default.createElement(_field.default, _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().default.forwardRef(InputImpl);
-InputForwardRef.displayName = 'Input';
-const InputComponent = /*#__PURE__*/_react().default.memo(InputForwardRef);
-const TextAreaImpl = (props, ref) => {
-  const {
-    autoSize: autoSizeProp,
-    ...rest
-  } = props;
-  const fieldTokens = (0, _tokens.useFieldTokens)(rest.fieldTokensOverride);
-  const lh = fieldTokens.defaults.textareaLineHeight;
-  const toRows = (0, _react().useCallback)(height => !(0, _validate.isFiniteNumber)(height) || height <= 0 ? undefined : Math.max(1, Math.round(height / lh)), [lh]);
-  const rAutoSize = (0, _react().useMemo)(() => !autoSizeProp || (0, _validate.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().default.createElement(InputComponent, _extends({
-    ref: ref
-  }, rest, {
-    type: "textarea",
-    autoSize: rAutoSize
-  }));
-};
-const TextAreaForwardRef = /*#__PURE__*/_react().default.forwardRef(TextAreaImpl);
-TextAreaForwardRef.displayName = 'Input.TextArea';
-const TextArea = exports.TextArea = /*#__PURE__*/_react().default.memo(TextAreaForwardRef);
-const Input = Object.assign(InputComponent, {
-  TextArea
-});
-var _default = exports.default = Input;
+"use strict";function _react(){const e=_interopRequireWildcard(require("react"));return _react=function(){return e},e}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.TextArea=void 0;var _validate=require("../../utils/validate"),_field=_interopRequireDefault(require("../field")),_tokens=require("../field/tokens"),_tokens2=require("./tokens");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}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 a,u,o={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return o;if(a=t?n:r){if(a.has(e))return a.get(e);a.set(e,o)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((u=(a=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(u.get||u.set)?a(o,t,u):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 n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},_extends.apply(null,arguments)}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:u,clearTrigger:o,onChange:i,onChangeText:l,showWordLimit:d,style:s,inputStyle:c,fieldTokensOverride:p,tokensOverride:f,..._}=e,g=(0,_tokens2.useInputTokens)(f),m=(0,_react().useRef)(null),x=(0,_react().useRef)(i),y=(0,_react().useRef)(l);x.current=i,y.current=l;const T=(0,_react().useCallback)(e=>{x.current?.(e),y.current?.(e)},[]);(0,_react().useImperativeHandle)(t,()=>({focus:()=>m.current?.focus?.(),blur:()=>m.current?.blur?.(),clear:()=>m.current?.clear?.(),get nativeElement(){return m.current?.nativeElement??null}}),[]);const b=a??u??g.defaults.inputAlign,v=o??g.defaults.clearTrigger,k=n??mapKeyboardType(r),w=[{paddingHorizontal:g.spacing.paddingHorizontal,paddingVertical:g.spacing.paddingVertical,backgroundColor:g.colors.background},s];return _react().default.createElement(_field.default,_extends({ref:m},_,{type:r,keyboardType:k,tokensOverride:p,border:g.defaults.border,inputAlign:b,clearTrigger:v,style:w,inputStyle:c,showWordLimit:d,onChangeText:T}))},InputForwardRef=_react().default.forwardRef(InputImpl);InputForwardRef.displayName="Input";const InputComponent=_react().default.memo(InputForwardRef),TextAreaImpl=(e,t)=>{const{autoSize:r,...n}=e,a=(0,_tokens.useFieldTokens)(n.fieldTokensOverride).defaults.textareaLineHeight,u=(0,_react().useCallback)(e=>!(0,_validate.isFiniteNumber)(e)||e<=0?void 0:Math.max(1,Math.round(e/a)),[a]),o=(0,_react().useMemo)(()=>!r||(0,_validate.isBoolean)(r)?r:(()=>{const e=u(r.minHeight),t=u(r.maxHeight);return e||t?{minRows:e,maxRows:t}:void 0})(),[r,u]);return _react().default.createElement(InputComponent,_extends({ref:t},n,{type:"textarea",autoSize:o}))},TextAreaForwardRef=_react().default.forwardRef(TextAreaImpl);TextAreaForwardRef.displayName="Input.TextArea";const TextArea=exports.TextArea=_react().default.memo(TextAreaForwardRef),Input=Object.assign(InputComponent,{TextArea:TextArea});var _default=exports.default=Input;

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

@@ -1,15 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "TextArea", {
-  enumerable: true,
-  get: function () {
-    return _Input.TextArea;
-  }
-});
-exports.default = void 0;
-var _Input = _interopRequireWildcard(require("./Input"));
-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); }
-var _default = exports.default = _Input.default;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"TextArea",{enumerable:!0,get:function(){return _Input.TextArea}}),exports.default=void 0;var _Input=_interopRequireWildcard(require("./Input"));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 u,o,i={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return i;if(u=t?n:r){if(u.has(e))return u.get(e);u.set(e,i)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((o=(u=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(o.get||o.set)?u(i,t,o):i[t]=e[t]);return i})(e,t)}var _default=exports.default=_Input.default;

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

@@ -1,22 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useInputTokens = void 0;
-var _designSystem = require("../../design-system");
-const createInputTokens = foundations => ({
-  defaults: {
-    inputAlign: 'left',
-    clearTrigger: 'focus',
-    border: true
-  },
-  spacing: {
-    paddingHorizontal: foundations.spacing.md,
-    paddingVertical: foundations.spacing.sm
-  },
-  colors: {
-    background: 'transparent'
-  }
-});
-const useInputTokens = exports.useInputTokens = (0, _designSystem.createComponentTokensHook)('input', createInputTokens);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useInputTokens=void 0;var _designSystem=require("../../design-system");const createInputTokens=e=>({defaults:{inputAlign:"left",clearTrigger:"focus",border:!0},spacing:{paddingHorizontal:e.spacing.md,paddingVertical:e.spacing.sm},colors:{background:"transparent"}}),useInputTokens=exports.useInputTokens=(0,_designSystem.createComponentTokensHook)("input",createInputTokens);

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

@@ -1,76 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Loading = void 0;
-function _react() {
-  const data = _interopRequireDefault(require("react"));
-  _react = function () {
-    return data;
-  };
-  return data;
-}
-function _reactNative() {
-  const data = require("react-native");
-  _reactNative = function () {
-    return data;
-  };
-  return data;
-}
-var _utils = require("../../utils");
-var _validate = require("../../utils/validate");
-var _tokens = require("./tokens");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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 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 = (0, _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().default.createElement(_reactNative().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 = (0, _validate.isRenderable)(children) && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: (0, _validate.isText)(children) ? undefined : txtSp
-  }, (0, _utils.renderTextOrNode)(children, [tokens.layout.text, txtSp, {
-    fontSize: ts,
-    color: tc
-  }, textStyle].filter(Boolean)));
-  return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
-    accessibilityRole: "progressbar",
-    style: [tokens.layout.container, {
-      flexDirection: vert ? 'column' : 'row',
-      justifyContent: vert ? 'center' : 'flex-start'
-    }, style]
-  }, rest), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: contentStyle
-  }, ind), txtNode);
-};
-const Loading = exports.Loading = /*#__PURE__*/_react().default.memo(LoadingImpl);
-Loading.displayName = 'Loading';
+"use strict";function _react(){const e=_interopRequireDefault(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.Loading=void 0;var _utils=require("../../utils"),_validate=require("../../utils/validate"),_tokens=require("./tokens");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}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 LoadingImpl=e=>{const{tokensOverride:t,color:r,size:a,textSize:i,textColor:n,vertical:o,accessibilityLabel:l,"aria-label":c,style:s,textStyle:u,contentStyle:d,children:_,...f}=e,v=(0,_tokens.useLoadingTokens)(t),g=r??v.colors.indicator,p=a??v.defaults.size,x=i??v.defaults.textSize,y=n??v.colors.text,b=o??v.defaults.vertical,m=c??l??"loading",L=_react().default.createElement(_reactNative().ActivityIndicator,{testID:"rv-loading-spinner",size:p,color:g,accessibilityLabel:m}),N={marginLeft:b?0:v.spacing.gap,marginTop:b?v.spacing.gap:0},q=(0,_validate.isRenderable)(_)&&_react().default.createElement(_reactNative().View,{style:(0,_validate.isText)(_)?void 0:N},(0,_utils.renderTextOrNode)(_,[v.layout.text,N,{fontSize:x,color:y},u].filter(Boolean)));return _react().default.createElement(_reactNative().View,_extends({accessibilityRole:"progressbar",style:[v.layout.container,{flexDirection:b?"column":"row",justifyContent:b?"center":"flex-start"},s]},f),_react().default.createElement(_reactNative().View,{style:d},L),q)},Loading=exports.Loading=_react().default.memo(LoadingImpl);Loading.displayName="Loading";

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

@@ -1,8 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _Loading = require("./Loading");
-var _default = exports.default = _Loading.Loading;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _Loading=require("./Loading"),_default=exports.default=_Loading.Loading;

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

@@ -1,32 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useLoadingTokens = exports.createLoadingTokens = void 0;
-var _designSystem = require("../../design-system");
-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
-  }
-});
-exports.createLoadingTokens = createLoadingTokens;
-const useLoadingTokens = exports.useLoadingTokens = (0, _designSystem.createComponentTokensHook)('loading', createLoadingTokens);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useLoadingTokens=exports.createLoadingTokens=void 0;var _designSystem=require("../../design-system");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}});exports.createLoadingTokens=createLoadingTokens;const useLoadingTokens=exports.useLoadingTokens=(0,_designSystem.createComponentTokensHook)("loading",createLoadingTokens);

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

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

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

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

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

@@ -1,90 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useNavBarTokens = exports.createNavBarTokens = void 0;
-var _designSystem = require("../../design-system");
-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
-    }
-  };
-};
-exports.createNavBarTokens = createNavBarTokens;
-const useNavBarTokens = exports.useNavBarTokens = (0, _designSystem.createComponentTokensHook)('navBar', createNavBarTokens);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useNavBarTokens=exports.createNavBarTokens=void 0;var _designSystem=require("../../design-system");const createNavBarTokens=({palette:e,spacing:t,fontSize:i,typography:n})=>({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:t.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:"#ffffff",text:e.default[900],description:e.default[500],border:e.default[200],icon:e.default[700]},typography:{fontFamily:n.fontFamily,titleSize:i.lg,titleWeight:"600",descriptionSize:i.sm},sizing:{height:52}});exports.createNavBarTokens=createNavBarTokens;const useNavBarTokens=exports.useNavBarTokens=(0,_designSystem.createComponentTokensHook)("navBar",createNavBarTokens);