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

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

@@ -0,0 +1,150 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ButtonType = exports.Button = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _utils = require("../../utils");
+var _accessibilityHistoryWrappers = require("../accessibility/accessibilityHistoryWrappers");
+var _text = require("../text");
+var _theme = require("../theme");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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); }
+let ButtonType = exports.ButtonType = /*#__PURE__*/function (ButtonType) {
+  ButtonType["Border"] = "border";
+  ButtonType["Primary"] = "primary";
+  ButtonType["Secondary"] = "secondary";
+  ButtonType["SmallTech"] = "small-tech";
+  return 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
+ */
+const Button = exports.Button = /*#__PURE__*/_react.default.forwardRef(({
+  style,
+  type = ButtonType.Primary,
+  disabled,
+  title,
+  subtitle,
+  onPressIn,
+  onPressOut,
+  testID,
+  ...props
+}, ref) => {
+  const colorScheme = (0, _theme.useAppColorScheme)();
+  const [secondaryPressed, setSecondaryPressed] = (0, _react.useState)(false);
+  const textColor = (0, _react.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 = (0, _react.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 = (0, _react.useMemo)(() => {
+    switch (type) {
+      case ButtonType.Border:
+        return colorScheme.background;
+      default:
+        return backgroundColor;
+    }
+  }, [type, colorScheme.background, backgroundColor]);
+  const secondaryPressIn = (0, _react.useCallback)(event => {
+    setSecondaryPressed(true);
+    onPressIn === null || onPressIn === void 0 || onPressIn(event);
+  }, [onPressIn]);
+  const secondaryPressOut = (0, _react.useCallback)(event => {
+    setSecondaryPressed(false);
+    onPressOut === null || onPressOut === void 0 || onPressOut(event);
+  }, [onPressOut]);
+  return /*#__PURE__*/_react.default.createElement(_accessibilityHistoryWrappers.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.default.createElement(_reactNative.View, {
+    style: [secondaryPressed && styles.secondaryPressedLabel, disabled && styles.disabled],
+    testID: (0, _utils.concatTestID)(testID, disabled ? 'disabled' : 'enabled')
+  }, /*#__PURE__*/_react.default.createElement(_text.Typography, {
+    preset: type === ButtonType.SmallTech ? 's' : 'regular',
+    color: textColor,
+    align: "center",
+    numberOfLines: 1
+  }, title), subtitle ? /*#__PURE__*/_react.default.createElement(_text.Typography, {
+    preset: "s/line-height-capped",
+    style: styles.subtitle,
+    color: textColor,
+    align: "center",
+    numberOfLines: 1
+  }, subtitle) : null));
+});
+Button.displayName = 'Button';
+const styles = _reactNative.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/commonjs/ui-components/buttons/button.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_utils","_accessibilityHistoryWrappers","_text","_theme","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","ButtonType","exports","SLOP_VALUE","hitSlop","top","bottom","left","right","ACTIVE_OPACITY","Primary","Border","Secondary","SmallTech","Button","React","forwardRef","style","type","disabled","title","subtitle","onPressIn","onPressOut","testID","props","ref","colorScheme","useAppColorScheme","secondaryPressed","setSecondaryPressed","useState","textColor","useMemo","accentText","text","codeAccent","backgroundColor","accent","background","white","borderColor","secondaryPressIn","useCallback","event","secondaryPressOut","createElement","TouchableOpacity","accessibilityRole","activeOpacity","styles","button","withSubtitle","undefined","techSmall","View","secondaryPressedLabel","concatTestID","Typography","preset","color","align","numberOfLines","displayName","StyleSheet","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":"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","ignoreList":[]}

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

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ConnectivityTransport = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _utils = require("../../utils");
+var _accessibility = require("../accessibility");
+var _connectivity = require("../icons/connectivity");
+var _text = require("../text");
+var _theme = require("../theme");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+let ConnectivityTransport = exports.ConnectivityTransport = /*#__PURE__*/function (ConnectivityTransport) {
+  ConnectivityTransport["Internet"] = "Internet";
+  ConnectivityTransport["Bluetooth"] = "Bluetooth";
+  ConnectivityTransport["All"] = "All";
+  return ConnectivityTransport;
+}({});
+const ConnectivityButton = ({
+  available,
+  disabled,
+  onPress,
+  status,
+  title,
+  transport,
+  testID
+}) => {
+  const colorScheme = (0, _theme.useAppColorScheme)();
+  const backgroundColor = status === undefined ? colorScheme.grayDark : colorScheme.white;
+  const opacity = disabled ? 0.7 : 1.0;
+  const icons = /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.icons
+  }, transport !== ConnectivityTransport.Bluetooth && (available ? /*#__PURE__*/_react.default.createElement(_connectivity.ConnectivityInternetOnIcon, {
+    testID: (0, _utils.concatTestID)(testID, 'icon.on')
+  }) : /*#__PURE__*/_react.default.createElement(_connectivity.ConnectivityInternetOffIcon, {
+    testID: (0, _utils.concatTestID)(testID, 'icon.off')
+  })), transport !== ConnectivityTransport.Internet && (available ? /*#__PURE__*/_react.default.createElement(_connectivity.ConnectivityBluetoothOnIcon, {
+    testID: (0, _utils.concatTestID)(testID, 'icon.on')
+  }) : /*#__PURE__*/_react.default.createElement(_connectivity.ConnectivityBluetoothOffIcon, {
+    testID: (0, _utils.concatTestID)(testID, 'icon.off')
+  })));
+  return /*#__PURE__*/_react.default.createElement(_accessibility.TouchableHighlight, {
+    onPress: onPress,
+    style: styles.button,
+    testID: testID
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.container, {
+      backgroundColor,
+      opacity
+    }]
+  }, icons, title && /*#__PURE__*/_react.default.createElement(_text.Typography, {
+    testID: (0, _utils.concatTestID)(testID, 'title'),
+    color: colorScheme.text,
+    preset: "s"
+  }, title), status !== undefined && /*#__PURE__*/_react.default.createElement(_connectivity.ConnectivityStatusIcon, {
+    status: status
+  })));
+};
+const styles = _reactNative.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
+  }
+});
+var _default = exports.default = ConnectivityButton;
+//# sourceMappingURL=connectivity-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_utils","_accessibility","_connectivity","_text","_theme","e","__esModule","default","ConnectivityTransport","exports","ConnectivityButton","available","disabled","onPress","status","title","transport","testID","colorScheme","useAppColorScheme","backgroundColor","undefined","grayDark","white","opacity","icons","createElement","View","style","styles","Bluetooth","ConnectivityInternetOnIcon","concatTestID","ConnectivityInternetOffIcon","Internet","ConnectivityBluetoothOnIcon","ConnectivityBluetoothOffIcon","TouchableHighlight","button","container","Typography","color","text","preset","ConnectivityStatusIcon","StyleSheet","create","borderRadius","overflow","alignItems","flexDirection","height","paddingHorizontal","paddingVertical","gap","_default"],"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} testID={testID}>\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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","ignoreList":[]}

package/lib/commonjs/ui-components/buttons/filter-button.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _accessibilityHistoryWrappers = require("../accessibility/accessibilityHistoryWrappers");
+var _icons = require("../icons/icons");
+var _colorSchemeContext = require("../theme/color-scheme-context");
+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 hitslop = {
+  bottom: 10,
+  left: 10,
+  right: 10,
+  top: 10
+};
+const FilterButton = ({
+  active,
+  style,
+  ...props
+}) => {
+  const colorScheme = (0, _colorSchemeContext.useAppColorScheme)();
+  return /*#__PURE__*/_react.default.createElement(_accessibilityHistoryWrappers.TouchableOpacity, _extends({
+    accessibilityRole: "button",
+    accessibilityState: {
+      selected: active
+    },
+    hitSlop: hitslop,
+    style: [styles.button, {
+      backgroundColor: active ? colorScheme.accent : undefined
+    }, style]
+  }, props), /*#__PURE__*/_react.default.createElement(_icons.FilterIcon, {
+    color: active ? colorScheme.white : colorScheme.accent
+  }));
+};
+const styles = _reactNative.StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    borderRadius: 20,
+    height: 40,
+    justifyContent: 'center',
+    width: 40
+  }
+});
+var _default = exports.default = FilterButton;
+//# sourceMappingURL=filter-button.js.map

package/lib/commonjs/ui-components/buttons/filter-button.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_accessibilityHistoryWrappers","_icons","_colorSchemeContext","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","hitslop","bottom","left","right","top","FilterButton","active","style","props","colorScheme","useAppColorScheme","createElement","TouchableOpacity","accessibilityRole","accessibilityState","selected","hitSlop","styles","button","backgroundColor","accent","undefined","FilterIcon","color","white","StyleSheet","create","alignItems","borderRadius","height","justifyContent","width","_default","exports"],"sources":["filter-button.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Insets, StyleSheet, TouchableOpacityProps } from 'react-native';\n\nimport { TouchableOpacity } from '../accessibility/accessibilityHistoryWrappers';\nimport { FilterIcon } from '../icons/icons';\nimport { useAppColorScheme } from '../theme/color-scheme-context';\n\nexport type FilterButtonProps = TouchableOpacityProps & {\n  active: boolean;\n};\n\nconst hitslop: Insets = { bottom: 10, left: 10, right: 10, top: 10 };\n\nconst FilterButton: FC<FilterButtonProps> = ({ active, style, ...props }) => {\n  const colorScheme = useAppColorScheme();\n  return (\n    <TouchableOpacity\n      accessibilityRole=\"button\"\n      accessibilityState={{ selected: active }}\n      hitSlop={hitslop}\n      style={[styles.button, { backgroundColor: active ? colorScheme.accent : undefined }, style]}\n      {...props}>\n      <FilterIcon color={active ? colorScheme.white : colorScheme.accent} />\n    </TouchableOpacity>\n  );\n};\n\nconst styles = StyleSheet.create({\n  button: {\n    alignItems: 'center',\n    borderRadius: 20,\n    height: 40,\n    justifyContent: 'center',\n    width: 40,\n  },\n});\n\nexport default FilterButton;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,6BAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,mBAAA,GAAAJ,OAAA;AAAkE,SAAAD,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,SAAA,WAAAA,QAAA,GAAAC,MAAA,CAAAC,MAAA,GAAAD,MAAA,CAAAC,MAAA,CAAAC,IAAA,eAAAC,CAAA,aAAAP,CAAA,MAAAA,CAAA,GAAAQ,SAAA,CAAAC,MAAA,EAAAT,CAAA,UAAAU,CAAA,GAAAF,SAAA,CAAAR,CAAA,YAAAW,CAAA,IAAAD,CAAA,OAAAE,cAAA,CAAAC,IAAA,CAAAH,CAAA,EAAAC,CAAA,MAAAJ,CAAA,CAAAI,CAAA,IAAAD,CAAA,CAAAC,CAAA,aAAAJ,CAAA,KAAAJ,QAAA,CAAAW,KAAA,OAAAN,SAAA;AAMlE,MAAMO,OAAe,GAAG;EAAEC,MAAM,EAAE,EAAE;EAAEC,IAAI,EAAE,EAAE;EAAEC,KAAK,EAAE,EAAE;EAAEC,GAAG,EAAE;AAAG,CAAC;AAEpE,MAAMC,YAAmC,GAAGA,CAAC;EAAEC,MAAM;EAAEC,KAAK;EAAE,GAAGC;AAAM,CAAC,KAAK;EAC3E,MAAMC,WAAW,GAAG,IAAAC,qCAAiB,EAAC,CAAC;EACvC,oBACEhC,MAAA,CAAAS,OAAA,CAAAwB,aAAA,CAAC7B,6BAAA,CAAA8B,gBAAgB,EAAAxB,QAAA;IACfyB,iBAAiB,EAAC,QAAQ;IAC1BC,kBAAkB,EAAE;MAAEC,QAAQ,EAAET;IAAO,CAAE;IACzCU,OAAO,EAAEhB,OAAQ;IACjBO,KAAK,EAAE,CAACU,MAAM,CAACC,MAAM,EAAE;MAAEC,eAAe,EAAEb,MAAM,GAAGG,WAAW,CAACW,MAAM,GAAGC;IAAU,CAAC,EAAEd,KAAK;EAAE,GACxFC,KAAK,gBACT9B,MAAA,CAAAS,OAAA,CAAAwB,aAAA,CAAC5B,MAAA,CAAAuC,UAAU;IAACC,KAAK,EAAEjB,MAAM,GAAGG,WAAW,CAACe,KAAK,GAAGf,WAAW,CAACW;EAAO,CAAE,CACrD,CAAC;AAEvB,CAAC;AAED,MAAMH,MAAM,GAAGQ,uBAAU,CAACC,MAAM,CAAC;EAC/BR,MAAM,EAAE;IACNS,UAAU,EAAE,QAAQ;IACpBC,YAAY,EAAE,EAAE;IAChBC,MAAM,EAAE,EAAE;IACVC,cAAc,EAAE,QAAQ;IACxBC,KAAK,EAAE;EACT;AACF,CAAC,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA9C,OAAA,GAEYkB,YAAY","ignoreList":[]}

package/lib/commonjs/ui-components/buttons/ghost-button.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _accessibility = require("../accessibility");
+var _accessibilityHistoryWrappers = require("../accessibility/accessibilityHistoryWrappers");
+var _theme = require("../theme");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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 hitSlop = {
+  top: 10,
+  left: 10,
+  bottom: 10,
+  right: 10
+};
+const GhostButton = ({
+  accessibilityLabel,
+  icon,
+  onPress,
+  style,
+  ...props
+}) => {
+  const colorScheme = (0, _theme.useAppColorScheme)();
+  const accessible = (0, _accessibility.useAccessibleAfterTransition)();
+  const iconElement = (0, _react.useMemo)(() => {
+    if (/*#__PURE__*/_react.default.isValidElement(icon)) {
+      return icon;
+    }
+    const Icon = icon;
+    return /*#__PURE__*/_react.default.createElement(Icon, {
+      color: colorScheme.text
+    });
+  }, [colorScheme.text, icon]);
+  return /*#__PURE__*/_react.default.createElement(_accessibilityHistoryWrappers.TouchableOpacity, _extends({
+    accessibilityLabel: accessibilityLabel,
+    accessibilityRole: "button",
+    accessible: accessible,
+    hitSlop: hitSlop,
+    onPress: onPress,
+    style: [styles.button, style]
+  }, props), iconElement);
+};
+const styles = _reactNative.StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+    borderRadius: 12,
+    height: 24,
+    justifyContent: 'center',
+    overflow: 'hidden',
+    width: 24
+  }
+});
+var _default = exports.default = GhostButton;
+//# sourceMappingURL=ghost-button.js.map

package/lib/commonjs/ui-components/buttons/ghost-button.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_accessibility","_accessibilityHistoryWrappers","_theme","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","hitSlop","top","left","bottom","right","GhostButton","accessibilityLabel","icon","onPress","style","props","colorScheme","useAppColorScheme","accessible","useAccessibleAfterTransition","iconElement","useMemo","React","isValidElement","Icon","createElement","color","text","TouchableOpacity","accessibilityRole","styles","button","StyleSheet","create","alignItems","backgroundColor","borderRadius","height","justifyContent","overflow","width","_default","exports"],"sources":["ghost-button.tsx"],"sourcesContent":["import React, { FC, ReactNode, useMemo } from 'react';\nimport { Insets, StyleProp, StyleSheet, TouchableOpacityProps, ViewStyle } from 'react-native';\nimport type { SvgProps } from 'react-native-svg';\n\nimport { useAccessibleAfterTransition } from '../accessibility';\nimport { TouchableOpacity } from '../accessibility/accessibilityHistoryWrappers';\nimport { useAppColorScheme } from '../theme';\n\nexport type GhostButtonProps = TouchableOpacityProps & {\n  accessibilityLabel: string;\n  icon?: FC<SvgProps> | ReactNode;\n  onPress: () => void;\n  style?: StyleProp<ViewStyle>;\n};\n\nconst hitSlop: Insets = { top: 10, left: 10, bottom: 10, right: 10 };\n\nconst GhostButton: FC<GhostButtonProps> = ({ accessibilityLabel, icon, onPress, style, ...props }) => {\n  const colorScheme = useAppColorScheme();\n  const accessible = useAccessibleAfterTransition();\n\n  const iconElement = useMemo(() => {\n    if (React.isValidElement(icon)) {\n      return icon;\n    }\n    const Icon = icon as FC<SvgProps>;\n    return <Icon color={colorScheme.text} />;\n  }, [colorScheme.text, icon]);\n\n  return (\n    <TouchableOpacity\n      accessibilityLabel={accessibilityLabel}\n      accessibilityRole=\"button\"\n      accessible={accessible}\n      hitSlop={hitSlop}\n      onPress={onPress}\n      style={[styles.button, style]}\n      {...props}>\n      {iconElement}\n    </TouchableOpacity>\n  );\n};\n\nconst styles = StyleSheet.create({\n  button: {\n    alignItems: 'center',\n    backgroundColor: 'transparent',\n    borderRadius: 12,\n    height: 24,\n    justifyContent: 'center',\n    overflow: 'hidden',\n    width: 24,\n  },\n});\n\nexport default GhostButton;\n"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/ui-components/buttons/hold-button.js

@@ -0,0 +1,244 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _accessibilityHistoryWrappers = require("../accessibility/accessibilityHistoryWrappers");
+var _text = require("../text");
+var _theme = require("../theme");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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 Content = ({
+  title,
+  subtitlePrefix,
+  subtitleSuffix,
+  width,
+  height,
+  textColor,
+  progress,
+  holdTimeoutSecs,
+  disabled
+}) => {
+  const nums = (0, _react.useMemo)(() => Array.from({
+    length: holdTimeoutSecs + 1
+  }).map((_, index) => holdTimeoutSecs - index), [holdTimeoutSecs]);
+  const [subtitleHeight, setSubtitleHeight] = (0, _react.useState)(0);
+  const onSubtitleLayout = (0, _react.useCallback)(({
+    nativeEvent
+  }) => {
+    setSubtitleHeight(nativeEvent.layout.height);
+  }, []);
+  const translateY = (0, _reactNativeReanimated.useDerivedValue)(() => progress.value * subtitleHeight * holdTimeoutSecs, [subtitleHeight, holdTimeoutSecs]);
+  const movingUpStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    transform: [{
+      translateY: -translateY.value
+    }]
+  }), [translateY]);
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.contentWrapper, disabled && styles.contentDisabled, {
+      width,
+      height
+    }],
+    pointerEvents: "none"
+  }, /*#__PURE__*/_react.default.createElement(_text.Typography, {
+    color: textColor,
+    numberOfLines: 1
+  }, title), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.subtitle, disabled && styles.subtitleDisabled]
+  }, /*#__PURE__*/_react.default.createElement(_text.Typography, {
+    onLayout: onSubtitleLayout,
+    preset: "s/line-height-capped",
+    color: textColor,
+    numberOfLines: 1
+  }, subtitlePrefix), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.subtitleSecsWrapper, {
+      height: subtitleHeight
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
+    style: [styles.subtitleSecs, movingUpStyle]
+  }, nums.map(val => /*#__PURE__*/_react.default.createElement(_text.Typography, {
+    key: val,
+    preset: "s/line-height-capped",
+    color: textColor,
+    numberOfLines: 1
+  }, val)))), /*#__PURE__*/_react.default.createElement(_text.Typography, {
+    preset: "s/line-height-capped",
+    color: textColor,
+    numberOfLines: 1
+  }, subtitleSuffix)));
+};
+const HoldButtonLayouted = ({
+  title,
+  subtitlePrefix,
+  subtitleSuffix,
+  onFinished,
+  holdTimeoutSecs = 3,
+  width,
+  height,
+  disabled,
+  ref,
+  ...props
+}) => {
+  const colorScheme = (0, _theme.useAppColorScheme)();
+  const [isFinished, setFinished] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    if (isFinished) {
+      onFinished();
+    }
+  }, [isFinished, onFinished]);
+  const progress = (0, _reactNativeReanimated.useSharedValue)(0);
+  const onLongPress = (0, _react.useCallback)(() => {
+    // Fix for detox bug https://github.com/wix/Detox/issues/4754
+    if (isFinished || progress.value !== 0) {
+      return;
+    }
+    setFinished(true);
+  }, [progress, isFinished]);
+  const onPressIn = (0, _react.useCallback)(() => {
+    const holdTimeout = holdTimeoutSecs * 1000;
+
+    // start moving forward
+    progress.value = (0, _reactNativeReanimated.withTiming)(1, {
+      duration: (1 - progress.value) * holdTimeout,
+      easing: _reactNativeReanimated.Easing.linear
+    }, finished => {
+      if (finished) {
+        (0, _reactNativeReanimated.runOnJS)(setFinished)(true);
+      } else {
+        // start moving back
+        progress.value = (0, _reactNativeReanimated.withTiming)(0, {
+          duration: progress.value * holdTimeout,
+          easing: _reactNativeReanimated.Easing.linear
+        });
+      }
+    });
+  }, [holdTimeoutSecs, progress]);
+  const onPressOut = (0, _react.useCallback)(() => (0, _reactNativeReanimated.cancelAnimation)(progress), [progress]);
+  const translateX = (0, _reactNativeReanimated.useDerivedValue)(() => progress.value * width, [width]);
+  const movingRightStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    transform: [{
+      translateX: translateX.value
+    }]
+  }), [translateX]);
+  const movingLeftStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    transform: [{
+      translateX: -translateX.value
+    }]
+  }), [translateX]);
+  const contentProps = (0, _react.useMemo)(() => ({
+    title,
+    subtitlePrefix,
+    subtitleSuffix,
+    progress,
+    holdTimeoutSecs,
+    width,
+    height
+  }), [title, subtitlePrefix, subtitleSuffix, progress, holdTimeoutSecs, width, height]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Content, _extends({
+    textColor: colorScheme.accent,
+    disabled: disabled
+  }, contentProps)), !disabled && /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
+    style: [styles.movingLayer, {
+      backgroundColor: colorScheme.accent
+    }, movingRightStyle]
+  }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
+    style: movingLeftStyle
+  }, /*#__PURE__*/_react.default.createElement(Content, _extends({
+    textColor: colorScheme.accentText
+  }, contentProps)))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.pressableLayer
+  }, /*#__PURE__*/_react.default.createElement(_accessibilityHistoryWrappers.TouchableWithoutFeedback, _extends({
+    accessibilityRole: "button",
+    ref: ref,
+    disabled: isFinished || disabled,
+    onLongPress: onLongPress,
+    onPressIn: isFinished ? undefined : onPressIn,
+    onPressOut: isFinished ? undefined : onPressOut
+  }, props), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: {
+      width,
+      height
+    }
+  }))));
+};
+
+/**
+ * Press and hold button component
+ *
+ * follows design: https://www.figma.com/design/cCmAyBQrQWCQZuDi85pJfe/Procivis-One-Wallet-Developments-2025?node-id=1-871
+ */
+const HoldButton = /*#__PURE__*/_react.default.forwardRef(({
+  style,
+  disabled,
+  ...props
+}, ref) => {
+  const colorScheme = (0, _theme.useAppColorScheme)();
+  const [layout, setLayout] = (0, _react.useState)();
+  const onContainerLayout = (0, _react.useCallback)(({
+    nativeEvent
+  }) => {
+    setLayout({
+      width: nativeEvent.layout.width,
+      height: nativeEvent.layout.height
+    });
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    onLayout: onContainerLayout,
+    style: [styles.container, disabled && styles.disabled, {
+      backgroundColor: disabled ? colorScheme.white : colorScheme.background,
+      borderColor: colorScheme.background
+    }, style]
+  }, layout && /*#__PURE__*/_react.default.createElement(HoldButtonLayouted, _extends({
+    ref: ref,
+    disabled: disabled
+  }, props, layout)));
+});
+HoldButton.displayName = 'HoldButton';
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    borderRadius: 12,
+    height: 68,
+    overflow: 'hidden'
+  },
+  contentDisabled: {
+    opacity: 0.4
+  },
+  contentWrapper: {
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingBottom: 16,
+    paddingHorizontal: 24,
+    paddingTop: 12
+  },
+  disabled: {
+    borderWidth: 1
+  },
+  movingLayer: {
+    overflow: 'hidden',
+    position: 'absolute'
+  },
+  pressableLayer: {
+    position: 'absolute'
+  },
+  subtitle: {
+    alignItems: 'flex-end',
+    flexDirection: 'row',
+    opacity: 0.8
+  },
+  subtitleDisabled: {
+    opacity: 1
+  },
+  subtitleSecs: {
+    alignItems: 'center'
+  },
+  subtitleSecsWrapper: {
+    overflow: 'hidden'
+  }
+});
+var _default = exports.default = HoldButton;
+//# sourceMappingURL=hold-button.js.map