@procivis/one-react-native-components 0.1.63 → 0.2.54

package/lib/module/index.js

@@ -1,27 +1,4 @@
-export * from './accessibility';
-export * from './action-modal';
-export * from './activity-indicator';
-export * from './blur';
-export * from './buttons';
-export * from './camera';
-export * from './control';
-export * from './credential';
-export * from './detail';
-export * from './entity';
-export * from './header';
-export * from './history';
-export * from './icons';
-export * from './image';
-export * from './input';
-export * from './list';
-export * from './loader';
-export * from './nerd-view';
-export * from './pin';
-export * from './screens';
-export * from './searchbar';
-export * from './settings';
-export * from './state';
-export * from './text';
-export * from './theme';
+export * from './components';
+export * from './ui-components';
 export * from './utils';
 //# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from './accessibility';\nexport * from './action-modal';\nexport * from './activity-indicator';\nexport * from './blur';\nexport * from './buttons';\nexport * from './camera';\nexport * from './control';\nexport * from './credential';\nexport * from './detail';\nexport * from './entity';\nexport * from './header';\nexport * from './history';\nexport * from './icons';\nexport * from './image';\nexport * from './input';\nexport * from './list';\nexport * from './loader';\nexport * from './nerd-view';\nexport * from './pin';\nexport * from './screens';\nexport * from './searchbar';\nexport * from './settings';\nexport * from './state';\nexport * from './text';\nexport * from './theme';\nexport * from './utils';\n"],"mappings":"AAAA,cAAc,iBAAiB;AAC/B,cAAc,gBAAgB;AAC9B,cAAc,sBAAsB;AACpC,cAAc,QAAQ;AACtB,cAAc,WAAW;AACzB,cAAc,UAAU;AACxB,cAAc,WAAW;AACzB,cAAc,cAAc;AAC5B,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,WAAW;AACzB,cAAc,SAAS;AACvB,cAAc,SAAS;AACvB,cAAc,SAAS;AACvB,cAAc,QAAQ;AACtB,cAAc,UAAU;AACxB,cAAc,aAAa;AAC3B,cAAc,OAAO;AACrB,cAAc,WAAW;AACzB,cAAc,aAAa;AAC3B,cAAc,YAAY;AAC1B,cAAc,SAAS;AACvB,cAAc,QAAQ;AACtB,cAAc,SAAS;AACvB,cAAc,SAAS"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from './components';\nexport * from './ui-components';\nexport * from './utils';\n"],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,iBAAiB;AAC/B,cAAc,SAAS"}

package/lib/module/ui-components/accessibility/accessibilityHistory.js

@@ -0,0 +1,71 @@
+import { useRoute } from '@react-navigation/native';
+import React, { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
+import { useForwardedRef } from '../../utils/ref';
+import { focusAccessibility, useAccessibleAfterTransition } from './accessibility';
+const accessibilityFocusHistoryContext = /*#__PURE__*/React.createContext({
+  setRef: () => {},
+  getRef: () => null
+});
+
+/**
+ * Adds app support for accessibility focus history
+ */
+export const AccessibilityFocusHistoryProvider = _ref => {
+  let {
+    children
+  } = _ref;
+  const Provider = accessibilityFocusHistoryContext.Provider;
+  const refs = useRef({});
+  const setRef = useCallback((route, ref) => {
+    refs.current[route] = ref;
+  }, []);
+  const getRef = useCallback(route => {
+    var _refs$current$route;
+    return (_refs$current$route = refs.current[route]) !== null && _refs$current$route !== void 0 ? _refs$current$route : null;
+  }, []);
+  const value = useMemo(() => ({
+    setRef,
+    getRef
+  }), [getRef, setRef]);
+  return /*#__PURE__*/React.createElement(Provider, {
+    value: value
+  }, children);
+};
+
+/**
+ * Wraps `onPress` handler and `ref` to support automatic accessibility focus on back navigation
+ * @note This needs to be used inside {@link AccessibilityFocusHistoryProvider} and navigation context
+ */
+export const useAccessibilityFocusHistory = (pressHandler, passedRef) => {
+  const [forwardedRef, refObject] = useForwardedRef(passedRef);
+  const historyContext = useContext(accessibilityFocusHistoryContext);
+  const routeKey = useRoute().key;
+  const previouslyPressed = useRef(false);
+  const outsideTransition = useAccessibleAfterTransition();
+  useEffect(() => {
+    const isStoredInHistory = historyContext.getRef(routeKey) === refObject.current;
+    if (outsideTransition && isStoredInHistory && previouslyPressed.current) {
+      focusAccessibility(refObject.current);
+    }
+  }, [historyContext, outsideTransition, refObject, routeKey]);
+  useEffect(() => {
+    if (outsideTransition) {
+      previouslyPressed.current = false;
+    }
+  }, [outsideTransition]);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const onPress = useCallback(function () {
+    previouslyPressed.current = true;
+    historyContext.setRef(routeKey, refObject.current);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    return pressHandler === null || pressHandler === void 0 ? void 0 : pressHandler(...args);
+  }, [historyContext, routeKey, refObject, pressHandler]);
+  return {
+    onPress,
+    ref: forwardedRef
+  };
+};
+//# sourceMappingURL=accessibilityHistory.js.map

package/lib/module/ui-components/accessibility/accessibilityHistory.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useRoute","React","useCallback","useContext","useEffect","useMemo","useRef","useForwardedRef","focusAccessibility","useAccessibleAfterTransition","accessibilityFocusHistoryContext","createContext","setRef","getRef","AccessibilityFocusHistoryProvider","_ref","children","Provider","refs","route","ref","current","_refs$current$route","value","createElement","useAccessibilityFocusHistory","pressHandler","passedRef","forwardedRef","refObject","historyContext","routeKey","key","previouslyPressed","outsideTransition","isStoredInHistory","onPress","_len","arguments","length","args","Array","_key"],"sources":["accessibilityHistory.tsx"],"sourcesContent":["import { useRoute } from '@react-navigation/native';\nimport React, { FC, PropsWithChildren, useCallback, useContext, useEffect, useMemo, useRef } from 'react';\n\nimport { useForwardedRef } from '../../utils/ref';\nimport { focusAccessibility, useAccessibleAfterTransition } from './accessibility';\n\ntype AccessibilityRefComponent = React.Component | React.ComponentClass | null;\ninterface AccessibilityRefContextValue {\n  setRef: (route: string, ref: AccessibilityRefComponent) => void;\n  getRef: (route: string) => AccessibilityRefComponent;\n}\n\nconst accessibilityFocusHistoryContext = React.createContext<AccessibilityRefContextValue>({\n  setRef: () => {},\n  getRef: () => null,\n});\n\n/**\n * Adds app support for accessibility focus history\n */\nexport const AccessibilityFocusHistoryProvider: FC<PropsWithChildren<{}>> = ({ children }) => {\n  const Provider = accessibilityFocusHistoryContext.Provider;\n  const refs = useRef<Record<string, AccessibilityRefComponent>>({});\n  const setRef = useCallback((route: string, ref: AccessibilityRefComponent) => {\n    refs.current[route] = ref;\n  }, []);\n  const getRef = useCallback((route: string) => {\n    return refs.current[route] ?? null;\n  }, []);\n  const value = useMemo(() => ({ setRef, getRef }), [getRef, setRef]);\n  return <Provider value={value}>{children}</Provider>;\n};\n\n/**\n * Wraps `onPress` handler and `ref` to support automatic accessibility focus on back navigation\n * @note This needs to be used inside {@link AccessibilityFocusHistoryProvider} and navigation context\n */\nexport const useAccessibilityFocusHistory = <\n  Component extends React.Component<any> | React.ComponentClass<any>,\n  OnPress extends (...args: never[]) => void = () => void,\n>(\n  pressHandler: OnPress | undefined,\n  passedRef?: React.Ref<Component>,\n) => {\n  const [forwardedRef, refObject] = useForwardedRef<Component>(passedRef);\n\n  const historyContext = useContext(accessibilityFocusHistoryContext);\n  const routeKey = useRoute().key;\n\n  const previouslyPressed = useRef(false);\n  const outsideTransition = useAccessibleAfterTransition();\n\n  useEffect(() => {\n    const isStoredInHistory = historyContext.getRef(routeKey) === refObject.current;\n    if (outsideTransition && isStoredInHistory && previouslyPressed.current) {\n      focusAccessibility(refObject.current);\n    }\n  }, [historyContext, outsideTransition, refObject, routeKey]);\n\n  useEffect(() => {\n    if (outsideTransition) {\n      previouslyPressed.current = false;\n    }\n  }, [outsideTransition]);\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const onPress = useCallback(\n    ((...args) => {\n      previouslyPressed.current = true;\n      historyContext.setRef(routeKey, refObject.current);\n      return pressHandler?.(...args);\n    }) as OnPress,\n    [historyContext, routeKey, refObject, pressHandler],\n  );\n\n  return { onPress, ref: forwardedRef };\n};\n"],"mappings":"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"}

package/lib/module/ui-components/blur/blur-view.js

@@ -0,0 +1,67 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import { BlurView as RNBlurView } from '@react-native-community/blur';
+import React, { useMemo } from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
+import { colorWithAlphaComponent } from '../../utils/color';
+import { useAppColorScheme } from '../theme';
+const BACKGROUND_COLOR = {
+  light: 'rgba(255, 255, 255, 0.8)',
+  dark: 'rgba(16, 12, 12, 0.8)',
+  thickMaterialLight: 'rgba(255, 255, 255, 0.95)',
+  thickMaterialDark: 'rgba(16, 12, 12, 0.95)',
+  thinMaterialLight: 'rgba(255, 255, 255, 0.8)',
+  thinMaterialDark: 'rgba(16, 12, 12, 0.8)'
+};
+const BlurView = _ref => {
+  let {
+    blurAmount = 50,
+    blurStyle,
+    color,
+    darkMode,
+    children,
+    style,
+    ...props
+  } = _ref;
+  const colorScheme = useAppColorScheme();
+  const themeDarkMode = colorScheme.darkMode;
+  const dark = darkMode !== null && darkMode !== void 0 ? darkMode : themeDarkMode;
+  const blurType = useMemo(() => {
+    if (blurStyle === 'header') {
+      return dark ? 'dark' : 'light';
+    } else if (blurStyle === 'soft') {
+      return dark ? 'thinMaterialDark' : 'thinMaterialLight';
+    } else {
+      return dark ? 'thickMaterialDark' : 'thickMaterialLight';
+    }
+  }, [blurStyle, dark]);
+  const backgroundStyle = useMemo(() => {
+    if (blurStyle === 'header' && color === colorScheme.background) {
+      return {
+        backgroundColor: '#00000005'
+      };
+    }
+  }, [blurStyle, color, colorScheme.background]);
+  if (Platform.OS === 'ios') {
+    return /*#__PURE__*/React.createElement(View, _extends({
+      style: [styles.wrapper, backgroundStyle, style]
+    }, props), /*#__PURE__*/React.createElement(RNBlurView, {
+      blurAmount: blurAmount,
+      blurType: blurType,
+      reducedTransparencyFallbackColor: color,
+      style: StyleSheet.absoluteFill
+    }), children);
+  }
+  const backgroundColor = color ? colorWithAlphaComponent(color, 0.9) : BACKGROUND_COLOR[blurType];
+  return /*#__PURE__*/React.createElement(View, _extends({
+    style: [{
+      backgroundColor
+    }, style]
+  }, props), children);
+};
+const styles = StyleSheet.create({
+  wrapper: {
+    overflow: 'hidden'
+  }
+});
+export default BlurView;
+//# sourceMappingURL=blur-view.js.map

package/lib/module/ui-components/blur/blur-view.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BlurView","RNBlurView","React","useMemo","Platform","StyleSheet","View","colorWithAlphaComponent","useAppColorScheme","BACKGROUND_COLOR","light","dark","thickMaterialLight","thickMaterialDark","thinMaterialLight","thinMaterialDark","_ref","blurAmount","blurStyle","color","darkMode","children","style","props","colorScheme","themeDarkMode","blurType","backgroundStyle","background","backgroundColor","OS","createElement","_extends","styles","wrapper","reducedTransparencyFallbackColor","absoluteFill","create","overflow"],"sources":["blur-view.tsx"],"sourcesContent":["import { BlurView as RNBlurView, BlurViewProps as RNBlurViewProps } from '@react-native-community/blur';\nimport React, { FC, PropsWithChildren, useMemo } from 'react';\nimport { ColorValue, Platform, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';\n\nimport { colorWithAlphaComponent } from '../../utils/color';\nimport { useAppColorScheme } from '../theme';\n\nexport interface BlurViewProps extends ViewProps {\n  blurAmount?: number;\n  color?: ColorValue;\n  darkMode?: boolean;\n  blurStyle: 'soft' | 'strong' | 'header';\n}\n\nconst BACKGROUND_COLOR = {\n  light: 'rgba(255, 255, 255, 0.8)',\n  dark: 'rgba(16, 12, 12, 0.8)',\n  thickMaterialLight: 'rgba(255, 255, 255, 0.95)',\n  thickMaterialDark: 'rgba(16, 12, 12, 0.95)',\n  thinMaterialLight: 'rgba(255, 255, 255, 0.8)',\n  thinMaterialDark: 'rgba(16, 12, 12, 0.8)',\n};\n\nconst BlurView: FC<PropsWithChildren<BlurViewProps>> = ({\n  blurAmount = 50,\n  blurStyle,\n  color,\n  darkMode,\n  children,\n  style,\n  ...props\n}) => {\n  const colorScheme = useAppColorScheme();\n  const themeDarkMode = colorScheme.darkMode;\n  const dark = darkMode ?? themeDarkMode;\n\n  const blurType: RNBlurViewProps['blurType'] = useMemo(() => {\n    if (blurStyle === 'header') {\n      return dark ? 'dark' : 'light';\n    } else if (blurStyle === 'soft') {\n      return dark ? 'thinMaterialDark' : 'thinMaterialLight';\n    } else {\n      return dark ? 'thickMaterialDark' : 'thickMaterialLight';\n    }\n  }, [blurStyle, dark]);\n\n  const backgroundStyle: ViewStyle | undefined = useMemo(() => {\n    if (blurStyle === 'header' && color === colorScheme.background) {\n      return { backgroundColor: '#00000005' };\n    }\n  }, [blurStyle, color, colorScheme.background]);\n\n  if (Platform.OS === 'ios') {\n    return (\n      <View style={[styles.wrapper, backgroundStyle, style]} {...props}>\n        <RNBlurView\n          blurAmount={blurAmount}\n          blurType={blurType}\n          reducedTransparencyFallbackColor={color as string}\n          style={StyleSheet.absoluteFill}\n        />\n        {children}\n      </View>\n    );\n  }\n\n  const backgroundColor = color ? colorWithAlphaComponent(color, 0.9) : BACKGROUND_COLOR[blurType];\n\n  return (\n    <View style={[{ backgroundColor }, style]} {...props}>\n      {children}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  wrapper: {\n    overflow: 'hidden',\n  },\n});\n\nexport default BlurView;\n"],"mappings":";AAAA,SAASA,QAAQ,IAAIC,UAAU,QAA0C,8BAA8B;AACvG,OAAOC,KAAK,IAA2BC,OAAO,QAAQ,OAAO;AAC7D,SAAqBC,QAAQ,EAAEC,UAAU,EAAEC,IAAI,QAA8B,cAAc;AAE3F,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,iBAAiB,QAAQ,UAAU;AAS5C,MAAMC,gBAAgB,GAAG;EACvBC,KAAK,EAAE,0BAA0B;EACjCC,IAAI,EAAE,uBAAuB;EAC7BC,kBAAkB,EAAE,2BAA2B;EAC/CC,iBAAiB,EAAE,wBAAwB;EAC3CC,iBAAiB,EAAE,0BAA0B;EAC7CC,gBAAgB,EAAE;AACpB,CAAC;AAED,MAAMf,QAA8C,GAAGgB,IAAA,IAQjD;EAAA,IARkD;IACtDC,UAAU,GAAG,EAAE;IACfC,SAAS;IACTC,KAAK;IACLC,QAAQ;IACRC,QAAQ;IACRC,KAAK;IACL,GAAGC;EACL,CAAC,GAAAP,IAAA;EACC,MAAMQ,WAAW,GAAGhB,iBAAiB,EAAE;EACvC,MAAMiB,aAAa,GAAGD,WAAW,CAACJ,QAAQ;EAC1C,MAAMT,IAAI,GAAGS,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAIK,aAAa;EAEtC,MAAMC,QAAqC,GAAGvB,OAAO,CAAC,MAAM;IAC1D,IAAIe,SAAS,KAAK,QAAQ,EAAE;MAC1B,OAAOP,IAAI,GAAG,MAAM,GAAG,OAAO;IAChC,CAAC,MAAM,IAAIO,SAAS,KAAK,MAAM,EAAE;MAC/B,OAAOP,IAAI,GAAG,kBAAkB,GAAG,mBAAmB;IACxD,CAAC,MAAM;MACL,OAAOA,IAAI,GAAG,mBAAmB,GAAG,oBAAoB;IAC1D;EACF,CAAC,EAAE,CAACO,SAAS,EAAEP,IAAI,CAAC,CAAC;EAErB,MAAMgB,eAAsC,GAAGxB,OAAO,CAAC,MAAM;IAC3D,IAAIe,SAAS,KAAK,QAAQ,IAAIC,KAAK,KAAKK,WAAW,CAACI,UAAU,EAAE;MAC9D,OAAO;QAAEC,eAAe,EAAE;MAAY,CAAC;IACzC;EACF,CAAC,EAAE,CAACX,SAAS,EAAEC,KAAK,EAAEK,WAAW,CAACI,UAAU,CAAC,CAAC;EAE9C,IAAIxB,QAAQ,CAAC0B,EAAE,KAAK,KAAK,EAAE;IACzB,oBACE5B,KAAA,CAAA6B,aAAA,CAACzB,IAAI,EAAA0B,QAAA;MAACV,KAAK,EAAE,CAACW,MAAM,CAACC,OAAO,EAAEP,eAAe,EAAEL,KAAK;IAAE,GAAKC,KAAK,gBAC9DrB,KAAA,CAAA6B,aAAA,CAAC9B,UAAU;MACTgB,UAAU,EAAEA,UAAW;MACvBS,QAAQ,EAAEA,QAAS;MACnBS,gCAAgC,EAAEhB,KAAgB;MAClDG,KAAK,EAAEjB,UAAU,CAAC+B;IAAa,EAC/B,EACDf,QAAQ,CACJ;EAEX;EAEA,MAAMQ,eAAe,GAAGV,KAAK,GAAGZ,uBAAuB,CAACY,KAAK,EAAE,GAAG,CAAC,GAAGV,gBAAgB,CAACiB,QAAQ,CAAC;EAEhG,oBACExB,KAAA,CAAA6B,aAAA,CAACzB,IAAI,EAAA0B,QAAA;IAACV,KAAK,EAAE,CAAC;MAAEO;IAAgB,CAAC,EAAEP,KAAK;EAAE,GAAKC,KAAK,GACjDF,QAAQ,CACJ;AAEX,CAAC;AAED,MAAMY,MAAM,GAAG5B,UAAU,CAACgC,MAAM,CAAC;EAC/BH,OAAO,EAAE;IACPI,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC;AAEF,eAAetC,QAAQ"}

package/lib/module/ui-components/buttons/back-button.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useAccessibilityTranslation","BackIcon","CloseIcon","GhostButton","BackButtonIcon","BackButton","_ref","style","icon","Back","onPress","props","t","Icon","Close","createElement","_extends","accessibilityLabel"],"sources":["back-button.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nimport { useAccessibilityTranslation } from '../accessibility/accessibilityLanguage';\nimport { BackIcon, CloseIcon } from '../icons';\nimport GhostButton, { GhostButtonProps } from './ghost-button';\n\nexport enum BackButtonIcon {\n  Back = 'back',\n  Close = 'close',\n}\n\nexport type BackButtonProps = Omit<GhostButtonProps, 'accessibilityLabel'>;\n\nconst BackButton: FC<BackButtonProps> = ({ style, icon = BackButtonIcon.Back, onPress, ...props }) => {\n  const t = useAccessibilityTranslation();\n\n  const Icon = icon === BackButtonIcon.Close ? CloseIcon : BackIcon;\n\n  return (\n    <GhostButton\n      accessibilityLabel={t(icon === BackButtonIcon.Close ? 'accessibility.nav.close' : 'accessibility.nav.back')}\n      icon={Icon}\n      onPress={onPress}\n      style={style}\n      {...props}\n    />\n  );\n};\n\nexport default BackButton;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAc,OAAO;AAEjC,SAASC,2BAA2B,QAAQ,wCAAwC;AACpF,SAASC,QAAQ,EAAEC,SAAS,QAAQ,UAAU;AAC9C,OAAOC,WAAW,MAA4B,gBAAgB;AAE9D,WAAYC,cAAc;AAGzB,WAHWA,cAAc;EAAdA,cAAc;EAAdA,cAAc;AAAA,GAAdA,cAAc,KAAdA,cAAc;AAO1B,MAAMC,UAA+B,GAAGC,IAAA,IAA8D;EAAA,IAA7D;IAAEC,KAAK;IAAEC,IAAI,GAAGJ,cAAc,CAACK,IAAI;IAAEC,OAAO;IAAE,GAAGC;EAAM,CAAC,GAAAL,IAAA;EAC/F,MAAMM,CAAC,GAAGZ,2BAA2B,EAAE;EAEvC,MAAMa,IAAI,GAAGL,IAAI,KAAKJ,cAAc,CAACU,KAAK,GAAGZ,SAAS,GAAGD,QAAQ;EAEjE,oBACEF,KAAA,CAAAgB,aAAA,CAACZ,WAAW,EAAAa,QAAA;IACVC,kBAAkB,EAAEL,CAAC,CAACJ,IAAI,KAAKJ,cAAc,CAACU,KAAK,GAAG,yBAAyB,GAAG,wBAAwB,CAAE;IAC5GN,IAAI,EAAEK,IAAK;IACXH,OAAO,EAAEA,OAAQ;IACjBH,KAAK,EAAEA;EAAM,GACTI,KAAK,EACT;AAEN,CAAC;AAED,eAAeN,UAAU"}

package/lib/module/ui-components/buttons/button.js

@@ -0,0 +1,143 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { useCallback, useMemo, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { concatTestID } from '../../utils';
+import { TouchableOpacity } from '../accessibility/accessibilityHistoryWrappers';
+import { Typography } from '../text';
+import { useAppColorScheme } from '../theme';
+export let ButtonType;
+(function (ButtonType) {
+  ButtonType["Border"] = "border";
+  ButtonType["Primary"] = "primary";
+  ButtonType["Secondary"] = "secondary";
+  ButtonType["SmallTech"] = "small-tech";
+})(ButtonType || (ButtonType = {}));
+const SLOP_VALUE = 10;
+const hitSlop = {
+  top: SLOP_VALUE,
+  bottom: SLOP_VALUE,
+  left: SLOP_VALUE,
+  right: SLOP_VALUE
+};
+const ACTIVE_OPACITY = {
+  [ButtonType.Primary]: 0.8,
+  [ButtonType.Border]: 1,
+  [ButtonType.Secondary]: 1,
+  [ButtonType.SmallTech]: 0.5
+};
+
+/**
+ * Common button component
+ *
+ * follows design: https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=419-18389
+ *
+ * for bordered style just override `borderColor` in style
+ */
+export const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    style,
+    type = ButtonType.Primary,
+    disabled,
+    title,
+    subtitle,
+    onPressIn,
+    onPressOut,
+    testID,
+    ...props
+  } = _ref;
+  const colorScheme = useAppColorScheme();
+  const [secondaryPressed, setSecondaryPressed] = useState(false);
+  const textColor = useMemo(() => {
+    switch (type) {
+      case ButtonType.Primary:
+        return colorScheme.accentText;
+      case ButtonType.Border:
+      case ButtonType.Secondary:
+        return colorScheme.text;
+      case ButtonType.SmallTech:
+        return colorScheme.codeAccent;
+    }
+  }, [type, colorScheme]);
+  const backgroundColor = useMemo(() => {
+    switch (type) {
+      case ButtonType.Primary:
+        return colorScheme.accent;
+      case ButtonType.Border:
+      case ButtonType.Secondary:
+        return secondaryPressed ? colorScheme.background : colorScheme.white;
+      case ButtonType.SmallTech:
+        return 'rgba(255, 255, 255, 0.05)';
+    }
+  }, [type, colorScheme, secondaryPressed]);
+  const borderColor = useMemo(() => {
+    switch (type) {
+      case ButtonType.Border:
+        return colorScheme.background;
+      default:
+        return backgroundColor;
+    }
+  }, [type, colorScheme.background, backgroundColor]);
+  const secondaryPressIn = useCallback(event => {
+    setSecondaryPressed(true);
+    onPressIn === null || onPressIn === void 0 ? void 0 : onPressIn(event);
+  }, [onPressIn]);
+  const secondaryPressOut = useCallback(event => {
+    setSecondaryPressed(false);
+    onPressOut === null || onPressOut === void 0 ? void 0 : onPressOut(event);
+  }, [onPressOut]);
+  return /*#__PURE__*/React.createElement(TouchableOpacity, _extends({
+    accessibilityRole: "button",
+    activeOpacity: ACTIVE_OPACITY[type],
+    hitSlop: hitSlop,
+    ref: ref,
+    style: [styles.button, subtitle ? styles.withSubtitle : undefined, {
+      backgroundColor,
+      borderColor
+    }, type === ButtonType.SmallTech && styles.techSmall, style],
+    disabled: disabled,
+    onPressIn: type === ButtonType.Secondary ? secondaryPressIn : onPressIn,
+    onPressOut: type === ButtonType.Secondary ? secondaryPressOut : onPressOut,
+    testID: testID
+  }, props), /*#__PURE__*/React.createElement(View, {
+    style: [secondaryPressed && styles.secondaryPressedLabel, disabled && styles.disabled],
+    testID: concatTestID(testID, disabled ? 'disabled' : 'enabled')
+  }, /*#__PURE__*/React.createElement(Typography, {
+    preset: type === ButtonType.SmallTech ? 's' : 'regular',
+    color: textColor,
+    align: "center",
+    numberOfLines: 1
+  }, title), subtitle ? /*#__PURE__*/React.createElement(Typography, {
+    preset: "s/line-height-capped",
+    style: styles.subtitle,
+    color: textColor,
+    align: "center",
+    numberOfLines: 1
+  }, subtitle) : null));
+});
+Button.displayName = 'Button';
+const styles = StyleSheet.create({
+  button: {
+    borderRadius: 12,
+    borderWidth: 1,
+    paddingHorizontal: 16,
+    paddingVertical: 20
+  },
+  disabled: {
+    opacity: 0.4
+  },
+  secondaryPressedLabel: {
+    opacity: 0.5
+  },
+  subtitle: {
+    opacity: 0.8
+  },
+  techSmall: {
+    borderRadius: 4,
+    paddingVertical: 12
+  },
+  withSubtitle: {
+    paddingBottom: 12,
+    paddingTop: 8
+  }
+});
+//# sourceMappingURL=button.js.map

package/lib/module/ui-components/buttons/button.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useMemo","useState","StyleSheet","View","concatTestID","TouchableOpacity","Typography","useAppColorScheme","ButtonType","SLOP_VALUE","hitSlop","top","bottom","left","right","ACTIVE_OPACITY","Primary","Border","Secondary","SmallTech","Button","forwardRef","_ref","ref","style","type","disabled","title","subtitle","onPressIn","onPressOut","testID","props","colorScheme","secondaryPressed","setSecondaryPressed","textColor","accentText","text","codeAccent","backgroundColor","accent","background","white","borderColor","secondaryPressIn","event","secondaryPressOut","createElement","_extends","accessibilityRole","activeOpacity","styles","button","withSubtitle","undefined","techSmall","secondaryPressedLabel","preset","color","align","numberOfLines","displayName","create","borderRadius","borderWidth","paddingHorizontal","paddingVertical","opacity","paddingBottom","paddingTop"],"sources":["button.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from 'react';\nimport { GestureResponderEvent, Insets, StyleSheet, TouchableOpacityProps, View } from 'react-native';\n\nimport { concatTestID } from '../../utils';\nimport { TouchableOpacity, TouchableOpacityRef } from '../accessibility/accessibilityHistoryWrappers';\nimport { Typography } from '../text';\nimport { useAppColorScheme } from '../theme';\n\nexport enum ButtonType {\n  Border = 'border',\n  Primary = 'primary',\n  Secondary = 'secondary',\n  SmallTech = 'small-tech',\n}\n\nexport interface ButtonProps extends TouchableOpacityProps {\n  type?: ButtonType;\n  title: string;\n  subtitle?: string;\n  disabled?: boolean;\n}\n\nconst SLOP_VALUE = 10;\nconst hitSlop: Insets = {\n  top: SLOP_VALUE,\n  bottom: SLOP_VALUE,\n  left: SLOP_VALUE,\n  right: SLOP_VALUE,\n};\n\nconst ACTIVE_OPACITY: Record<ButtonType, number> = {\n  [ButtonType.Primary]: 0.8,\n  [ButtonType.Border]: 1,\n  [ButtonType.Secondary]: 1,\n  [ButtonType.SmallTech]: 0.5,\n};\n\n/**\n * Common button component\n *\n * follows design: https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=419-18389\n *\n * for bordered style just override `borderColor` in style\n */\nexport const Button = React.forwardRef<TouchableOpacityRef, ButtonProps>(\n  ({ style, type = ButtonType.Primary, disabled, title, subtitle, onPressIn, onPressOut, testID, ...props }, ref) => {\n    const colorScheme = useAppColorScheme();\n    const [secondaryPressed, setSecondaryPressed] = useState(false);\n\n    const textColor = useMemo(() => {\n      switch (type) {\n        case ButtonType.Primary:\n          return colorScheme.accentText;\n        case ButtonType.Border:\n        case ButtonType.Secondary:\n          return colorScheme.text;\n        case ButtonType.SmallTech:\n          return colorScheme.codeAccent;\n      }\n    }, [type, colorScheme]);\n\n    const backgroundColor = useMemo(() => {\n      switch (type) {\n        case ButtonType.Primary:\n          return colorScheme.accent;\n        case ButtonType.Border:\n        case ButtonType.Secondary:\n          return secondaryPressed ? colorScheme.background : colorScheme.white;\n        case ButtonType.SmallTech:\n          return 'rgba(255, 255, 255, 0.05)';\n      }\n    }, [type, colorScheme, secondaryPressed]);\n\n    const borderColor = useMemo(() => {\n      switch (type) {\n        case ButtonType.Border:\n          return colorScheme.background;\n        default:\n          return backgroundColor;\n      }\n    }, [type, colorScheme.background, backgroundColor]);\n\n    const secondaryPressIn = useCallback(\n      (event: GestureResponderEvent) => {\n        setSecondaryPressed(true);\n        onPressIn?.(event);\n      },\n      [onPressIn],\n    );\n\n    const secondaryPressOut = useCallback(\n      (event: GestureResponderEvent) => {\n        setSecondaryPressed(false);\n        onPressOut?.(event);\n      },\n      [onPressOut],\n    );\n\n    return (\n      <TouchableOpacity\n        accessibilityRole=\"button\"\n        activeOpacity={ACTIVE_OPACITY[type]}\n        hitSlop={hitSlop}\n        ref={ref}\n        style={[\n          styles.button,\n          subtitle ? styles.withSubtitle : undefined,\n          { backgroundColor, borderColor },\n          type === ButtonType.SmallTech && styles.techSmall,\n          style,\n        ]}\n        disabled={disabled}\n        onPressIn={type === ButtonType.Secondary ? secondaryPressIn : onPressIn}\n        onPressOut={type === ButtonType.Secondary ? secondaryPressOut : onPressOut}\n        testID={testID}\n        {...props}>\n        <View\n          style={[secondaryPressed && styles.secondaryPressedLabel, disabled && styles.disabled]}\n          testID={concatTestID(testID, disabled ? 'disabled' : 'enabled')}>\n          <Typography\n            preset={type === ButtonType.SmallTech ? 's' : 'regular'}\n            color={textColor}\n            align=\"center\"\n            numberOfLines={1}>\n            {title}\n          </Typography>\n          {subtitle ? (\n            <Typography\n              preset=\"s/line-height-capped\"\n              style={styles.subtitle}\n              color={textColor}\n              align=\"center\"\n              numberOfLines={1}>\n              {subtitle}\n            </Typography>\n          ) : null}\n        </View>\n      </TouchableOpacity>\n    );\n  },\n);\n\nButton.displayName = 'Button';\n\nconst styles = StyleSheet.create({\n  button: {\n    borderRadius: 12,\n    borderWidth: 1,\n    paddingHorizontal: 16,\n    paddingVertical: 20,\n  },\n  disabled: {\n    opacity: 0.4,\n  },\n  secondaryPressedLabel: {\n    opacity: 0.5,\n  },\n  subtitle: {\n    opacity: 0.8,\n  },\n  techSmall: {\n    borderRadius: 4,\n    paddingVertical: 12,\n  },\n  withSubtitle: {\n    paddingBottom: 12,\n    paddingTop: 8,\n  },\n});\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAC7D,SAAwCC,UAAU,EAAyBC,IAAI,QAAQ,cAAc;AAErG,SAASC,YAAY,QAAQ,aAAa;AAC1C,SAASC,gBAAgB,QAA6B,+CAA+C;AACrG,SAASC,UAAU,QAAQ,SAAS;AACpC,SAASC,iBAAiB,QAAQ,UAAU;AAE5C,WAAYC,UAAU;AAKrB,WALWA,UAAU;EAAVA,UAAU;EAAVA,UAAU;EAAVA,UAAU;EAAVA,UAAU;AAAA,GAAVA,UAAU,KAAVA,UAAU;AActB,MAAMC,UAAU,GAAG,EAAE;AACrB,MAAMC,OAAe,GAAG;EACtBC,GAAG,EAAEF,UAAU;EACfG,MAAM,EAAEH,UAAU;EAClBI,IAAI,EAAEJ,UAAU;EAChBK,KAAK,EAAEL;AACT,CAAC;AAED,MAAMM,cAA0C,GAAG;EACjD,CAACP,UAAU,CAACQ,OAAO,GAAG,GAAG;EACzB,CAACR,UAAU,CAACS,MAAM,GAAG,CAAC;EACtB,CAACT,UAAU,CAACU,SAAS,GAAG,CAAC;EACzB,CAACV,UAAU,CAACW,SAAS,GAAG;AAC1B,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,MAAM,gBAAGtB,KAAK,CAACuB,UAAU,CACpC,CAAAC,IAAA,EAA2GC,GAAG,KAAK;EAAA,IAAlH;IAAEC,KAAK;IAAEC,IAAI,GAAGjB,UAAU,CAACQ,OAAO;IAAEU,QAAQ;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,SAAS;IAAEC,UAAU;IAAEC,MAAM;IAAE,GAAGC;EAAM,CAAC,GAAAV,IAAA;EACvG,MAAMW,WAAW,GAAG1B,iBAAiB,EAAE;EACvC,MAAM,CAAC2B,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGlC,QAAQ,CAAC,KAAK,CAAC;EAE/D,MAAMmC,SAAS,GAAGpC,OAAO,CAAC,MAAM;IAC9B,QAAQyB,IAAI;MACV,KAAKjB,UAAU,CAACQ,OAAO;QACrB,OAAOiB,WAAW,CAACI,UAAU;MAC/B,KAAK7B,UAAU,CAACS,MAAM;MACtB,KAAKT,UAAU,CAACU,SAAS;QACvB,OAAOe,WAAW,CAACK,IAAI;MACzB,KAAK9B,UAAU,CAACW,SAAS;QACvB,OAAOc,WAAW,CAACM,UAAU;IAAC;EAEpC,CAAC,EAAE,CAACd,IAAI,EAAEQ,WAAW,CAAC,CAAC;EAEvB,MAAMO,eAAe,GAAGxC,OAAO,CAAC,MAAM;IACpC,QAAQyB,IAAI;MACV,KAAKjB,UAAU,CAACQ,OAAO;QACrB,OAAOiB,WAAW,CAACQ,MAAM;MAC3B,KAAKjC,UAAU,CAACS,MAAM;MACtB,KAAKT,UAAU,CAACU,SAAS;QACvB,OAAOgB,gBAAgB,GAAGD,WAAW,CAACS,UAAU,GAAGT,WAAW,CAACU,KAAK;MACtE,KAAKnC,UAAU,CAACW,SAAS;QACvB,OAAO,2BAA2B;IAAC;EAEzC,CAAC,EAAE,CAACM,IAAI,EAAEQ,WAAW,EAAEC,gBAAgB,CAAC,CAAC;EAEzC,MAAMU,WAAW,GAAG5C,OAAO,CAAC,MAAM;IAChC,QAAQyB,IAAI;MACV,KAAKjB,UAAU,CAACS,MAAM;QACpB,OAAOgB,WAAW,CAACS,UAAU;MAC/B;QACE,OAAOF,eAAe;IAAC;EAE7B,CAAC,EAAE,CAACf,IAAI,EAAEQ,WAAW,CAACS,UAAU,EAAEF,eAAe,CAAC,CAAC;EAEnD,MAAMK,gBAAgB,GAAG9C,WAAW,CACjC+C,KAA4B,IAAK;IAChCX,mBAAmB,CAAC,IAAI,CAAC;IACzBN,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAGiB,KAAK,CAAC;EACpB,CAAC,EACD,CAACjB,SAAS,CAAC,CACZ;EAED,MAAMkB,iBAAiB,GAAGhD,WAAW,CAClC+C,KAA4B,IAAK;IAChCX,mBAAmB,CAAC,KAAK,CAAC;IAC1BL,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAGgB,KAAK,CAAC;EACrB,CAAC,EACD,CAAChB,UAAU,CAAC,CACb;EAED,oBACEhC,KAAA,CAAAkD,aAAA,CAAC3C,gBAAgB,EAAA4C,QAAA;IACfC,iBAAiB,EAAC,QAAQ;IAC1BC,aAAa,EAAEpC,cAAc,CAACU,IAAI,CAAE;IACpCf,OAAO,EAAEA,OAAQ;IACjBa,GAAG,EAAEA,GAAI;IACTC,KAAK,EAAE,CACL4B,MAAM,CAACC,MAAM,EACbzB,QAAQ,GAAGwB,MAAM,CAACE,YAAY,GAAGC,SAAS,EAC1C;MAAEf,eAAe;MAAEI;IAAY,CAAC,EAChCnB,IAAI,KAAKjB,UAAU,CAACW,SAAS,IAAIiC,MAAM,CAACI,SAAS,EACjDhC,KAAK,CACL;IACFE,QAAQ,EAAEA,QAAS;IACnBG,SAAS,EAAEJ,IAAI,KAAKjB,UAAU,CAACU,SAAS,GAAG2B,gBAAgB,GAAGhB,SAAU;IACxEC,UAAU,EAAEL,IAAI,KAAKjB,UAAU,CAACU,SAAS,GAAG6B,iBAAiB,GAAGjB,UAAW;IAC3EC,MAAM,EAAEA;EAAO,GACXC,KAAK,gBACTlC,KAAA,CAAAkD,aAAA,CAAC7C,IAAI;IACHqB,KAAK,EAAE,CAACU,gBAAgB,IAAIkB,MAAM,CAACK,qBAAqB,EAAE/B,QAAQ,IAAI0B,MAAM,CAAC1B,QAAQ,CAAE;IACvFK,MAAM,EAAE3B,YAAY,CAAC2B,MAAM,EAAEL,QAAQ,GAAG,UAAU,GAAG,SAAS;EAAE,gBAChE5B,KAAA,CAAAkD,aAAA,CAAC1C,UAAU;IACToD,MAAM,EAAEjC,IAAI,KAAKjB,UAAU,CAACW,SAAS,GAAG,GAAG,GAAG,SAAU;IACxDwC,KAAK,EAAEvB,SAAU;IACjBwB,KAAK,EAAC,QAAQ;IACdC,aAAa,EAAE;EAAE,GAChBlC,KAAK,CACK,EACZC,QAAQ,gBACP9B,KAAA,CAAAkD,aAAA,CAAC1C,UAAU;IACToD,MAAM,EAAC,sBAAsB;IAC7BlC,KAAK,EAAE4B,MAAM,CAACxB,QAAS;IACvB+B,KAAK,EAAEvB,SAAU;IACjBwB,KAAK,EAAC,QAAQ;IACdC,aAAa,EAAE;EAAE,GAChBjC,QAAQ,CACE,GACX,IAAI,CACH,CACU;AAEvB,CAAC,CACF;AAEDR,MAAM,CAAC0C,WAAW,GAAG,QAAQ;AAE7B,MAAMV,MAAM,GAAGlD,UAAU,CAAC6D,MAAM,CAAC;EAC/BV,MAAM,EAAE;IACNW,YAAY,EAAE,EAAE;IAChBC,WAAW,EAAE,CAAC;IACdC,iBAAiB,EAAE,EAAE;IACrBC,eAAe,EAAE;EACnB,CAAC;EACDzC,QAAQ,EAAE;IACR0C,OAAO,EAAE;EACX,CAAC;EACDX,qBAAqB,EAAE;IACrBW,OAAO,EAAE;EACX,CAAC;EACDxC,QAAQ,EAAE;IACRwC,OAAO,EAAE;EACX,CAAC;EACDZ,SAAS,EAAE;IACTQ,YAAY,EAAE,CAAC;IACfG,eAAe,EAAE;EACnB,CAAC;EACDb,YAAY,EAAE;IACZe,aAAa,EAAE,EAAE;IACjBC,UAAU,EAAE;EACd;AACF,CAAC,CAAC"}

package/lib/module/ui-components/buttons/connectivity-button.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { concatTestID } from '../../utils';
+import { TouchableHighlight } from '../accessibility';
+import { ConnectivityBluetoothOffIcon, ConnectivityBluetoothOnIcon, ConnectivityInternetOffIcon, ConnectivityInternetOnIcon, ConnectivityStatusIcon } from '../icons/connectivity';
+import { Typography } from '../text';
+import { useAppColorScheme } from '../theme';
+export let ConnectivityTransport;
+(function (ConnectivityTransport) {
+  ConnectivityTransport["Internet"] = "Internet";
+  ConnectivityTransport["Bluetooth"] = "Bluetooth";
+  ConnectivityTransport["All"] = "All";
+})(ConnectivityTransport || (ConnectivityTransport = {}));
+const ConnectivityButton = _ref => {
+  let {
+    available,
+    disabled,
+    onPress,
+    status,
+    title,
+    transport,
+    testID
+  } = _ref;
+  const colorScheme = useAppColorScheme();
+  const backgroundColor = status === undefined ? colorScheme.grayDark : colorScheme.white;
+  const opacity = disabled ? 0.7 : 1.0;
+  const icons = /*#__PURE__*/React.createElement(View, {
+    style: styles.icons
+  }, transport !== ConnectivityTransport.Bluetooth && (available ? /*#__PURE__*/React.createElement(ConnectivityInternetOnIcon, {
+    testID: concatTestID(testID, 'icon.on')
+  }) : /*#__PURE__*/React.createElement(ConnectivityInternetOffIcon, {
+    testID: concatTestID(testID, 'icon.off')
+  })), transport !== ConnectivityTransport.Internet && (available ? /*#__PURE__*/React.createElement(ConnectivityBluetoothOnIcon, {
+    testID: concatTestID(testID, 'icon.on')
+  }) : /*#__PURE__*/React.createElement(ConnectivityBluetoothOffIcon, {
+    testID: concatTestID(testID, 'icon.off')
+  })));
+  return /*#__PURE__*/React.createElement(TouchableHighlight, {
+    onPress: onPress,
+    style: styles.button
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, {
+      backgroundColor,
+      opacity
+    }]
+  }, icons, title && /*#__PURE__*/React.createElement(Typography, {
+    testID: concatTestID(testID, 'title'),
+    color: colorScheme.text,
+    preset: "s"
+  }, title), status !== undefined && /*#__PURE__*/React.createElement(ConnectivityStatusIcon, {
+    status: status
+  })));
+};
+const styles = StyleSheet.create({
+  button: {
+    borderRadius: 20,
+    overflow: 'hidden'
+  },
+  container: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    height: 40,
+    paddingHorizontal: 12,
+    paddingVertical: 9
+  },
+  icons: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: 5
+  }
+});
+export default ConnectivityButton;
+//# sourceMappingURL=connectivity-button.js.map

package/lib/module/ui-components/buttons/connectivity-button.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","View","concatTestID","TouchableHighlight","ConnectivityBluetoothOffIcon","ConnectivityBluetoothOnIcon","ConnectivityInternetOffIcon","ConnectivityInternetOnIcon","ConnectivityStatusIcon","Typography","useAppColorScheme","ConnectivityTransport","ConnectivityButton","_ref","available","disabled","onPress","status","title","transport","testID","colorScheme","backgroundColor","undefined","grayDark","white","opacity","icons","createElement","style","styles","Bluetooth","Internet","button","container","color","text","preset","create","borderRadius","overflow","alignItems","flexDirection","height","paddingHorizontal","paddingVertical","gap"],"sources":["connectivity-button.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { StyleSheet, View } from 'react-native';\n\nimport { concatTestID } from '../../utils';\nimport { TouchableHighlight } from '../accessibility';\nimport {\n  ConnectivityBluetoothOffIcon,\n  ConnectivityBluetoothOnIcon,\n  ConnectivityInternetOffIcon,\n  ConnectivityInternetOnIcon,\n  ConnectivityStatusIcon,\n} from '../icons/connectivity';\nimport { Typography } from '../text';\nimport { useAppColorScheme } from '../theme';\n\nexport enum ConnectivityTransport {\n  Internet = 'Internet',\n  Bluetooth = 'Bluetooth',\n  All = 'All',\n}\n\nexport type ConnectivityButtonProps = {\n  available: boolean;\n  disabled?: boolean;\n  onPress?: () => void;\n  status?: boolean;\n  title?: string;\n  transport: ConnectivityTransport;\n  testID?: string;\n};\n\nconst ConnectivityButton: FC<ConnectivityButtonProps> = ({\n  available,\n  disabled,\n  onPress,\n  status,\n  title,\n  transport,\n  testID,\n}) => {\n  const colorScheme = useAppColorScheme();\n\n  const backgroundColor = status === undefined ? colorScheme.grayDark : colorScheme.white;\n  const opacity = disabled ? 0.7 : 1.0;\n  const icons = (\n    <View style={styles.icons}>\n      {transport !== ConnectivityTransport.Bluetooth &&\n        (available ? (\n          <ConnectivityInternetOnIcon testID={concatTestID(testID, 'icon.on')} />\n        ) : (\n          <ConnectivityInternetOffIcon testID={concatTestID(testID, 'icon.off')} />\n        ))}\n      {transport !== ConnectivityTransport.Internet &&\n        (available ? (\n          <ConnectivityBluetoothOnIcon testID={concatTestID(testID, 'icon.on')} />\n        ) : (\n          <ConnectivityBluetoothOffIcon testID={concatTestID(testID, 'icon.off')} />\n        ))}\n    </View>\n  );\n  return (\n    <TouchableHighlight onPress={onPress} style={styles.button}>\n      <View style={[styles.container, { backgroundColor, opacity }]}>\n        {icons}\n        {title && (\n          <Typography testID={concatTestID(testID, 'title')} color={colorScheme.text} preset=\"s\">\n            {title}\n          </Typography>\n        )}\n        {status !== undefined && <ConnectivityStatusIcon status={status} />}\n      </View>\n    </TouchableHighlight>\n  );\n};\n\nconst styles = StyleSheet.create({\n  button: {\n    borderRadius: 20,\n    overflow: 'hidden',\n  },\n  container: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    height: 40,\n    paddingHorizontal: 12,\n    paddingVertical: 9,\n  },\n  icons: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    gap: 5,\n  },\n});\n\nexport default ConnectivityButton;\n"],"mappings":"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"}

package/lib/module/ui-components/credential/card/credential-card.js

@@ -0,0 +1,171 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { useCallback, useMemo, useState } from 'react';
+import { Image, StyleSheet, View } from 'react-native';
+import { concatTestID } from '../../../utils/testID';
+import { TouchableOpacity } from '../../accessibility/accessibilityHistoryWrappers';
+import BlurView from '../../blur/blur-view';
+import ImageOrComponent from '../../image/image-or-component';
+import Typography from '../../text/typography';
+import { useAppColorScheme } from '../../theme/color-scheme-context';
+import CredentialHeader from './credential-header';
+import CarouselComponent from './credential-image-carousel';
+export const CredentialCardShadow = {
+  shadowColor: '#10274226',
+  shadowOffset: {
+    height: 5,
+    width: 0
+  },
+  shadowOpacity: 1,
+  shadowRadius: 7
+};
+export const CredentialCardRatio = 18 / 11;
+const CredentialCard = _ref => {
+  var _header$color;
+  let {
+    cardCarouselImages = [],
+    cardImage,
+    color = '#5A69F3',
+    credentialId,
+    header,
+    notice,
+    onCardPress,
+    onHeaderPress,
+    style,
+    testID
+  } = _ref;
+  const colorScheme = useAppColorScheme();
+  const [tappableHeaderHeight, setTappableHeaderHeight] = useState();
+  const [cardSize, setCardSize] = useState();
+  const onCardLayoutChange = useCallback(event => {
+    const {
+      width,
+      height
+    } = event.nativeEvent.layout;
+    setCardSize({
+      width,
+      height
+    });
+  }, []);
+  const onHeaderLayoutChange = useCallback(event => {
+    setTappableHeaderHeight(event.nativeEvent.layout.height);
+  }, []);
+  const headerPressHandler = useCallback(() => {
+    onHeaderPress === null || onHeaderPress === void 0 ? void 0 : onHeaderPress(credentialId);
+  }, [credentialId, onHeaderPress]);
+  const cardPressHandler = useCallback(() => {
+    onCardPress === null || onCardPress === void 0 ? void 0 : onCardPress(credentialId);
+  }, [credentialId, onCardPress]);
+  const noticeIconView = useMemo(() => {
+    if (!(notice !== null && notice !== void 0 && notice.noticeIcon)) {
+      return undefined;
+    }
+    if ( /*#__PURE__*/React.isValidElement(notice.noticeIcon)) {
+      return notice.noticeIcon;
+    } else {
+      const NoticeIconComponent = notice.noticeIcon;
+      return /*#__PURE__*/React.createElement(NoticeIconComponent, null);
+    }
+  }, [notice === null || notice === void 0 ? void 0 : notice.noticeIcon]);
+  const shouldShowCarousel = (cardSize === null || cardSize === void 0 ? void 0 : cardSize.width) && cardSize.height;
+  return /*#__PURE__*/React.createElement(View, {
+    onLayout: onCardLayoutChange,
+    style: [styles.card, style],
+    testID: testID
+  }, cardImage ? 'imageSource' in cardImage ? /*#__PURE__*/React.createElement(View, {
+    style: styles.cardImage
+  }, /*#__PURE__*/React.createElement(Image, {
+    testID: concatTestID(testID, 'imageSource'),
+    source: cardImage.imageSource,
+    style: styles.image
+  })) : /*#__PURE__*/React.createElement(ImageOrComponent, {
+    testID: concatTestID(testID, 'cardImage'),
+    source: cardImage,
+    style: styles.cardImage
+  }) : /*#__PURE__*/React.createElement(View, {
+    testID: concatTestID(testID, 'cardBackgroundColor', String(color)),
+    style: [styles.cardImage, {
+      backgroundColor: color
+    }]
+  }), onCardPress && /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: styles.cardButton,
+    onPress: cardPressHandler
+  }), shouldShowCarousel ? /*#__PURE__*/React.createElement(CarouselComponent, {
+    style: {
+      marginTop: tappableHeaderHeight !== null && tappableHeaderHeight !== void 0 ? tappableHeaderHeight : 0
+    },
+    imagesToRender: cardCarouselImages !== null && cardCarouselImages !== void 0 ? cardCarouselImages : [],
+    carouselSize: {
+      width: cardSize.width,
+      height: cardSize.height - (tappableHeaderHeight !== null && tappableHeaderHeight !== void 0 ? tappableHeaderHeight : 0)
+    },
+    testID: concatTestID(testID, 'carousel')
+  }) : null, /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onLayout: onHeaderLayoutChange,
+    activeOpacity: 0.9,
+    disabled: !onHeaderPress,
+    onPress: headerPressHandler,
+    style: styles.header
+  }, /*#__PURE__*/React.createElement(CredentialHeader, _extends({}, header, {
+    color: (_header$color = header.color) !== null && _header$color !== void 0 ? _header$color : color,
+    testID: concatTestID(testID, 'header')
+  }))), notice && /*#__PURE__*/React.createElement(BlurView, {
+    blurStyle: "soft",
+    style: [styles.notice],
+    testID: concatTestID(testID, 'notice')
+  }, noticeIconView && /*#__PURE__*/React.createElement(View, {
+    style: styles.noticeIcon
+  }, noticeIconView), /*#__PURE__*/React.createElement(View, {
+    style: styles.noticeTextWrapper
+  }, /*#__PURE__*/React.createElement(Typography, {
+    color: colorScheme.text,
+    preset: "xs/line-height-small",
+    style: styles.noticeText,
+    testID: concatTestID(testID, 'notice.text')
+  }, notice.text))));
+};
+const styles = StyleSheet.create({
+  card: {
+    borderRadius: 10,
+    overflow: 'hidden'
+  },
+  cardButton: {
+    height: '100%',
+    position: 'absolute',
+    width: '100%'
+  },
+  cardImage: {
+    aspectRatio: CredentialCardRatio,
+    width: '100%'
+  },
+  header: {
+    position: 'absolute',
+    top: 0,
+    width: '100%'
+  },
+  image: {
+    height: '100%',
+    width: '100%'
+  },
+  notice: {
+    bottom: 0,
+    columnGap: 6,
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    paddingBottom: 6,
+    paddingHorizontal: 12,
+    paddingTop: 2,
+    position: 'absolute',
+    width: '100%'
+  },
+  noticeIcon: {
+    marginTop: 4
+  },
+  noticeText: {
+    marginVertical: 5
+  },
+  noticeTextWrapper: {
+    flex: 1
+  }
+});
+export default CredentialCard;
+//# sourceMappingURL=credential-card.js.map