@beppla/tapas-ui 1.0.67 → 1.0.69

package/commonjs/Alert/Alert.js

@@ -79,7 +79,7 @@ const Alert = ({
   }))));
 };
 var _default = exports.default = (0, _themed.withTheme)(Alert);
-//# sourceMappingURL=Alert.js.mape = props.message,
+
     closable = props.closable,
     icon = props.icon;
   return react_1.default.createElement(react_native_1.View, {
@@ -106,4 +106,3 @@ var _default = exports.default = (0, _themed.withTheme)(Alert);
   }))));
 };
 exports.default = (0, themed_1.withTheme)(Alert);
-//# sourceMappingURL=Alert.js.map

package/commonjs/AnimatedNavItem/AnimatedNavItem.js

@@ -172,7 +172,7 @@ const useStyles = (0, _themed.makeStyles)((theme, props) => {
 });
 var _default = exports.default = (0, _themed.withTheme)(TapasAnimatedNavItem); // Export aliases for compatibility
 const AnimatedNavItem = exports.AnimatedNavItem = (0, _themed.withTheme)(TapasAnimatedNavItem);
-//# sourceMappingURL=AnimatedNavItem.js.mapor(),
+
       opacity: disabled ? 0.5 : 1
     }],
     onPress: handlePress,
@@ -243,4 +243,3 @@ var useStyles = (0, themed_1.makeStyles)(function (theme, props) {
 exports.default = (0, themed_1.withTheme)(TapasAnimatedNavItem);
 // Export aliases for compatibility
 exports.AnimatedNavItem = (0, themed_1.withTheme)(TapasAnimatedNavItem);
-//# sourceMappingURL=AnimatedNavItem.js.map

package/commonjs/AnimatedNavItem/index.js

@@ -1,27 +1,32 @@
 "use strict";
 
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "AnimatedNavItem", {
+exports.TapasAnimatedNavItem = exports.AnimatedNavItem = exports.default = void 0;
+var AnimatedNavItem_1 = require("./AnimatedNavItem");
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _AnimatedNavItem.AnimatedNavItem;
+    return __importDefault(AnimatedNavItem_1).default;
   }
 });
-Object.defineProperty(exports, "TapasAnimatedNavItem", {
+var AnimatedNavItem_2 = require("./AnimatedNavItem");
+Object.defineProperty(exports, "AnimatedNavItem", {
   enumerable: true,
   get: function () {
-    return _AnimatedNavItem.TapasAnimatedNavItem;
+    return AnimatedNavItem_2.AnimatedNavItem;
   }
 });
-Object.defineProperty(exports, "default", {
+Object.defineProperty(exports, "TapasAnimatedNavItem", {
   enumerable: true,
   get: function () {
-    return _AnimatedNavItem.default;
+    return AnimatedNavItem_2.TapasAnimatedNavItem;
   }
 });
-var _AnimatedNavItem = _interopRequireWildcard(require("./AnimatedNavItem"));
-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; }
-//# sourceMappingURL=index.js.map
+

package/commonjs/BarChart/BarChart.js

@@ -1,24 +1,20 @@
 "use strict";
 
-var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
-  return mod && mod.__esModule ? mod : {
-    "default": mod
-  };
-};
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BarChart = void 0;
-var react_1 = __importDefault(require("react"));
-var react_native_1 = require("react-native");
-var Text_1 = __importDefault(require("../Text/Text"));
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _Text = _interopRequireDefault(require("../Text/Text"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // 动态导入依赖
-var RNBarChart, Grid, RNXAxis, RNYAxis, SVGText;
-var RechartsBar, RechartsXAxis, RechartsYAxis, CartesianGrid, Tooltip, Bar, ResponsiveContainer;
-if (react_native_1.Platform.OS === 'web') {
+let RNBarChart, Grid, RNXAxis, RNYAxis, SVGText;
+let RechartsBar, RechartsXAxis, RechartsYAxis, CartesianGrid, Tooltip, Bar, ResponsiveContainer;
+if (_reactNative.Platform.OS === 'web') {
   // Web 环境使用 recharts
   try {
-    var recharts = require('recharts');
+    const recharts = require('recharts');
     RechartsBar = recharts.BarChart;
     RechartsXAxis = recharts.XAxis;
     RechartsYAxis = recharts.YAxis;
@@ -32,8 +28,8 @@ if (react_native_1.Platform.OS === 'web') {
 } else {
   // 移动端使用 react-native-svg-charts
   try {
-    var svgCharts = require('react-native-svg-charts');
-    var svg = require('react-native-svg');
+    const svgCharts = require('react-native-svg-charts');
+    const svg = require('react-native-svg');
     RNBarChart = svgCharts.BarChart;
     Grid = svgCharts.Grid;
     RNXAxis = svgCharts.XAxis;
@@ -43,60 +39,46 @@ if (react_native_1.Platform.OS === 'web') {
     console.warn('react-native-svg-charts not available');
   }
 }
-var BarChart = function (_a) {
-  var data = _a.data,
-    width = _a.width,
-    _b = _a.height,
-    height = _b === void 0 ? 300 : _b,
-    _c = _a.color,
-    color = _c === void 0 ? '#FF6B00' : _c,
-    colors = _a.colors,
-    _d = _a.showGrid,
-    showGrid = _d === void 0 ? true : _d,
-    _e = _a.showLabels,
-    showLabels = _e === void 0 ? true : _e,
-    _f = _a.showValues,
-    showValues = _f === void 0 ? false : _f,
-    _g = _a.horizontal,
-    horizontal = _g === void 0 ? false : _g,
-    _h = _a.contentInset,
-    contentInset = _h === void 0 ? {
-      top: 20,
-      bottom: 20,
-      left: 20,
-      right: 20
-    } : _h,
-    _j = _a.yAxisFormat,
-    yAxisFormat = _j === void 0 ? function (value) {
-      return value.toString();
-    } : _j,
-    _k = _a.xAxisFormat,
-    xAxisFormat = _k === void 0 ? function (_value, index) {
-      var _a;
-      return ((_a = data[index]) === null || _a === void 0 ? void 0 : _a.label) || index.toString();
-    } : _k,
-    style = _a.style,
-    testID = _a.testID;
+const BarChart = ({
+  data,
+  width,
+  height = 300,
+  color = '#FF6B00',
+  colors,
+  showGrid = true,
+  showLabels = true,
+  showValues = false,
+  horizontal = false,
+  contentInset = {
+    top: 20,
+    bottom: 20,
+    left: 20,
+    right: 20
+  },
+  yAxisFormat = value => value.toString(),
+  xAxisFormat = (_value, index) => data[index]?.label || index.toString(),
+  style,
+  testID
+}) => {
   if (data.length === 0) {
-    return react_1.default.createElement(react_native_1.View, {
+    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
       style: [styles.container, {
-        height: height
+        height
       }, style]
-    }, react_1.default.createElement(Text_1.default, {
+    }, /*#__PURE__*/_react.default.createElement(_Text.default, {
       style: styles.emptyText
     }, "No data available"));
   }
+
   // Web 环境使用 Recharts
-  if (react_native_1.Platform.OS === 'web' && RechartsBar) {
-    var chartData_1 = data.map(function (item, index) {
-      return {
-        name: item.label || "Item ".concat(index + 1),
-        value: item.value,
-        fill: colors ? colors[index % colors.length] : item.color || color
-      };
-    });
-    var ChartComponent = react_1.default.createElement(RechartsBar, {
-      data: chartData_1,
+  if (_reactNative.Platform.OS === 'web' && RechartsBar) {
+    const chartData = data.map((item, index) => ({
+      name: item.label || `Item ${index + 1}`,
+      value: item.value,
+      fill: colors ? colors[index % colors.length] : item.color || color
+    }));
+    const ChartComponent = /*#__PURE__*/_react.default.createElement(RechartsBar, {
+      data: chartData,
       layout: horizontal ? 'horizontal' : 'vertical',
       margin: {
         top: 20,
@@ -104,19 +86,19 @@ var BarChart = function (_a) {
         left: 20,
         bottom: showLabels ? 80 : 20
       }
-    }, showGrid && react_1.default.createElement(CartesianGrid, {
+    }, showGrid && /*#__PURE__*/_react.default.createElement(CartesianGrid, {
       strokeDasharray: "3 3",
       stroke: "#E0E0E0"
-    }), horizontal ? react_1.default.createElement(react_1.default.Fragment, null, react_1.default.createElement(RechartsXAxis, {
+    }), horizontal ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(RechartsXAxis, {
       type: "number"
-    }), react_1.default.createElement(RechartsYAxis, {
+    }), /*#__PURE__*/_react.default.createElement(RechartsYAxis, {
       dataKey: "name",
       type: "category",
       width: 100,
       style: {
         fontSize: 10
       }
-    })) : react_1.default.createElement(react_1.default.Fragment, null, showLabels && react_1.default.createElement(RechartsXAxis, {
+    })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showLabels && /*#__PURE__*/_react.default.createElement(RechartsXAxis, {
       dataKey: "name",
       angle: -45,
       textAnchor: "end",
@@ -125,18 +107,18 @@ var BarChart = function (_a) {
       style: {
         fontSize: 10
       }
-    }), react_1.default.createElement(RechartsYAxis, {
+    }), /*#__PURE__*/_react.default.createElement(RechartsYAxis, {
       tickFormatter: yAxisFormat,
       style: {
         fontSize: 10
       }
-    })), react_1.default.createElement(Tooltip, {
+    })), /*#__PURE__*/_react.default.createElement(Tooltip, {
       contentStyle: {
         backgroundColor: 'rgba(255, 255, 255, 0.95)',
         border: '1px solid #E0E0E0',
         borderRadius: 4
       }
-    }), react_1.default.createElement(Bar, {
+    }), /*#__PURE__*/_react.default.createElement(Bar, {
       dataKey: "value",
       fill: color,
       label: showValues ? {
@@ -144,70 +126,68 @@ var BarChart = function (_a) {
         fontSize: 12
       } : false
     }));
-    return react_1.default.createElement(react_native_1.View, {
+    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
       style: [styles.container, {
-        height: height,
+        height,
         width: width || '100%'
       }, style],
       testID: testID
-    }, ResponsiveContainer ? react_1.default.createElement(ResponsiveContainer, {
+    }, ResponsiveContainer ? /*#__PURE__*/_react.default.createElement(ResponsiveContainer, {
       width: "100%",
       height: height - 20
     }, ChartComponent) : ChartComponent);
   }
+
   // 移动端使用 react-native-svg-charts
   if (!RNBarChart) {
-    return react_1.default.createElement(react_native_1.View, {
+    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
       style: [styles.container, {
-        height: height
+        height
       }, style]
-    }, react_1.default.createElement(Text_1.default, {
+    }, /*#__PURE__*/_react.default.createElement(_Text.default, {
       style: styles.emptyText
     }, "Chart library not available"));
   }
-  var chartData = data.map(function (item, index) {
-    return {
-      value: item.value,
-      svg: {
-        fill: colors ? colors[index % colors.length] : item.color || color
-      }
-    };
-  });
-  var CUT_OFF = 0;
-  var Labels = function (_a) {
-    var x = _a.x,
-      y = _a.y,
-      bandwidth = _a.bandwidth,
-      data = _a.data;
+  const chartData = data.map((item, index) => ({
+    value: item.value,
+    svg: {
+      fill: colors ? colors[index % colors.length] : item.color || color
+    }
+  }));
+  const CUT_OFF = 0;
+  const Labels = ({
+    x,
+    y,
+    bandwidth,
+    data
+  }) => {
     if (!showValues || !SVGText) return null;
-    return data.map(function (value, index) {
-      return react_1.default.createElement(SVGText, {
-        key: index,
-        x: x(index) + bandwidth / 2,
-        y: value < CUT_OFF ? y(value) - 10 : y(value) + 15,
-        fontSize: 12,
-        fill: value >= CUT_OFF ? 'white' : 'black',
-        alignmentBaseline: 'middle',
-        textAnchor: 'middle'
-      }, value.toFixed(0));
-    });
+    return data.map((value, index) => /*#__PURE__*/_react.default.createElement(SVGText, {
+      key: index,
+      x: x(index) + bandwidth / 2,
+      y: value < CUT_OFF ? y(value) - 10 : y(value) + 15,
+      fontSize: 12,
+      fill: value >= CUT_OFF ? 'white' : 'black',
+      alignmentBaseline: 'middle',
+      textAnchor: 'middle'
+    }, value.toFixed(0)));
   };
-  return react_1.default.createElement(react_native_1.View, {
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: [styles.container, {
-      height: height,
+      height,
       width: width || '100%'
     }, style],
     testID: testID
-  }, !horizontal ? react_1.default.createElement(react_native_1.View, {
+  }, !horizontal ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: styles.chartWrapper
-  }, react_1.default.createElement(RNBarChart, {
+  }, /*#__PURE__*/_react.default.createElement(RNBarChart, {
     style: {
       flex: 1
     },
     data: chartData,
     contentInset: contentInset,
     gridMin: 0
-  }, showGrid && Grid && react_1.default.createElement(Grid, null), showValues && react_1.default.createElement(Labels, null)), showLabels && RNXAxis && react_1.default.createElement(RNXAxis, {
+  }, showGrid && Grid && /*#__PURE__*/_react.default.createElement(Grid, null), showValues && /*#__PURE__*/_react.default.createElement(Labels, null)), showLabels && RNXAxis && /*#__PURE__*/_react.default.createElement(RNXAxis, {
     style: styles.xAxis,
     data: data,
     formatLabel: xAxisFormat,
@@ -219,12 +199,10 @@ var BarChart = function (_a) {
       fontSize: 10,
       fill: 'black'
     }
-  })) : react_1.default.createElement(react_native_1.View, {
+  })) : /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: styles.horizontalWrapper
-  }, showLabels && RNYAxis && react_1.default.createElement(RNYAxis, {
-    data: data.map(function (d) {
-      return d.value;
-    }),
+  }, showLabels && RNYAxis && /*#__PURE__*/_react.default.createElement(RNYAxis, {
+    data: data.map(d => d.value),
     contentInset: {
       top: 10,
       bottom: 10
@@ -235,7 +213,7 @@ var BarChart = function (_a) {
       fill: 'black'
     },
     style: styles.yAxis
-  }), react_1.default.createElement(RNBarChart, {
+  }), /*#__PURE__*/_react.default.createElement(RNBarChart, {
     style: {
       flex: 1
     },
@@ -246,12 +224,12 @@ var BarChart = function (_a) {
     },
     horizontal: true,
     gridMin: 0
-  }, showGrid && Grid && react_1.default.createElement(Grid, {
+  }, showGrid && Grid && /*#__PURE__*/_react.default.createElement(Grid, {
     direction: Grid.Direction.VERTICAL
   }))));
 };
 exports.BarChart = BarChart;
-var styles = react_native_1.StyleSheet.create({
+const styles = _reactNative.StyleSheet.create({
   container: {
     backgroundColor: 'transparent'
   },
@@ -277,4 +255,3 @@ var styles = react_native_1.StyleSheet.create({
     color: '#999'
   }
 });
-//# sourceMappingURL=BarChart.js.map

package/commonjs/BarChart/index.js

@@ -10,4 +10,3 @@ Object.defineProperty(exports, "BarChart", {
   }
 });
 var _BarChart = require("./BarChart");
-//# sourceMappingURL=index.js.mapsourceMappingURL=index.js.map

package/commonjs/Button/Button.js

@@ -1,104 +1,86 @@
 "use strict";
 
-var __assign = void 0 && (void 0).__assign || function () {
-  __assign = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-    return t;
-  };
-  return __assign.apply(this, arguments);
-};
-var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  var desc = Object.getOwnPropertyDescriptor(m, k);
-  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-    desc = {
-      enumerable: true,
-      get: function () {
-        return m[k];
-      }
-    };
-  }
-  Object.defineProperty(o, k2, desc);
-} : function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  o[k2] = m[k];
-});
-var __setModuleDefault = void 0 && (void 0).__setModuleDefault || (Object.create ? function (o, v) {
-  Object.defineProperty(o, "default", {
-    enumerable: true,
-    value: v
-  });
-} : function (o, v) {
-  o["default"] = v;
-});
-var __importStar = void 0 && (void 0).__importStar || function () {
-  var ownKeys = function (o) {
-    ownKeys = Object.getOwnPropertyNames || function (o) {
-      var ar = [];
-      for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-      return ar;
-    };
-    return ownKeys(o);
-  };
-  return function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-    __setModuleDefault(result, mod);
-    return result;
-  };
-}();
-var __rest = void 0 && (void 0).__rest || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
-  return mod && mod.__esModule ? mod : {
-    "default": mod
-  };
-};
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Button = void 0;
-var react_1 = __importStar(require("react"));
-var themed_1 = require("@rneui/themed");
-var react_native_1 = require("react-native");
-var Hoverable_1 = __importDefault(require("../Hoverable/Hoverable"));
-var useStyles = (0, themed_1.makeStyles)(function (theme) {
-  var _a, _b, _c, _d, _e, _f, _g;
-  return {
-    buttonHovered: {
-      backgroundColor: (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.colorSurface2
-    },
-    outlineButtonHovered: {
-      backgroundColor: (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.grey4,
-      borderColor: (_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.grey4
-    },
-    button: {
-      backgroundColor: (_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.primary
-    },
-    baseButton: {
-      fontFamily: (_e = theme === null || theme === void 0 ? void 0 : theme.fonts) === null || _e === void 0 ? void 0 : _e.fontFamily,
-      fontSize: theme === null || theme === void 0 ? void 0 : theme.fonts.sizeM,
-      fontWeight: theme === null || theme === void 0 ? void 0 : theme.fonts.weightM
-    },
-    outlineButton: {
-      borderColor: (_f = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _f === void 0 ? void 0 : _f.grey4,
-      backgroundColor: ((_g = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _g === void 0 ? void 0 : _g.white) || '#ffffff'
-    }
-  };
-});
-var Button = function (_a) {
-  var hoverStyle = _a.hoverStyle,
-    buttonStyle = _a.buttonStyle,
+exports.default = exports.Button = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _themed = require("@rneui/themed");
+var _reactNative = require("react-native");
+var _Hoverable = _interopRequireDefault(require("../Hoverable/Hoverable"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 useStyles = (0, _themed.makeStyles)(theme => ({
+  buttonHovered: {
+    backgroundColor: theme?.colors?.colorSurface2
+  },
+  outlineButtonHovered: {
+    backgroundColor: theme?.colors?.grey4,
+    borderColor: theme?.colors?.grey4
+  },
+  button: {
+    backgroundColor: theme?.colors?.primary
+  },
+  baseButton: {
+    fontFamily: theme?.fonts?.fontFamily,
+    fontSize: theme?.fonts.sizeM,
+    fontWeight: theme?.fonts.weightM
+  },
+  outlineButton: {
+    borderColor: theme?.colors?.grey4,
+    backgroundColor: theme?.colors?.white || '#ffffff'
+  }
+}));
+const Button = ({
+  hoverStyle,
+  buttonStyle,
+  width,
+  ...props
+}) => {
+  const [isHovered, setIsHovered] = (0, _react.useState)(false);
+  const styles = useStyles(props);
+  const handleMouseEnter = (0, _react.useCallback)(() => {
+    setIsHovered(true);
+  }, []);
+  const handleMouseLeave = (0, _react.useCallback)(() => {
+    setIsHovered(false);
+  }, []);
+  const {
+    primaryStyle,
+    hoveredStyle
+  } = (0, _react.useMemo)(() => ({
+    primaryStyle: props.type === 'solid' ? styles.button : props.type === 'outline' ? styles.outlineButton : {},
+    hoveredStyle: props.type === 'solid' ? styles.buttonHovered : props.type === 'outline' ? styles.outlineButtonHovered : {}
+  }), [props.type, styles]);
+  const newButtonStyle = (0, _react.useMemo)(() => isHovered && props.type !== 'clear' ? {
+    ...hoveredStyle,
+    ...hoverStyle
+  } : {
+    ...primaryStyle,
+    ...buttonStyle
+  }, [isHovered, props.type, hoveredStyle, hoverStyle, primaryStyle, buttonStyle]);
+  const containerStyle = (0, _react.useMemo)(() => ({
+    width
+  }), [width]);
+  const titleStyleMemo = (0, _react.useMemo)(() => [styles.baseButton, props.titleStyle], [styles.baseButton, props.titleStyle]);
+  return _reactNative.Platform.OS === 'web' && props.type !== 'clear' ? /*#__PURE__*/_react.default.createElement(_Hoverable.default, {
+    onHoverIn: handleMouseEnter,
+    onHoverOut: handleMouseLeave
+  }, isHovered => /*#__PURE__*/_react.default.createElement(_themed.Button, _extends({
+    containerStyle: containerStyle,
+    buttonStyle: isHovered ? [newButtonStyle, hoverStyle].filter(Boolean) : newButtonStyle,
+    titleStyle: isHovered ? [titleStyleMemo, props.selectedTitleStyle] : titleStyleMemo
+  }, props))) : /*#__PURE__*/_react.default.createElement(_themed.Button, _extends({
+    containerStyle: containerStyle,
+    buttonStyle: newButtonStyle,
+    titleStyle: titleStyleMemo
+  }, props));
+};
+exports.Button = Button;
+var _default = exports.default = Button;
+
     width = _a.width,
     props = __rest(_a, ["hoverStyle", "buttonStyle", "width"]);
   var _b = (0, react_1.useState)(false),
@@ -147,4 +129,3 @@ var Button = function (_a) {
 };
 exports.Button = Button;
 exports.default = exports.Button;
-//# sourceMappingURL=Button.js.map

package/commonjs/Button/ButtonGroup.js

@@ -140,7 +140,7 @@ const ButtonGroup = ({
   }));
 };
 var _default = exports.default = ButtonGroup;
-//# sourceMappingURL=ButtonGroup.js.map_f[1];
+
   var styles = useStyles(props);
   var handleMouseEnter = function (index) {
     setIsHovered(true);
@@ -191,4 +191,3 @@ var _default = exports.default = ButtonGroup;
   }));
 };
 exports.default = ButtonGroup;
-//# sourceMappingURL=ButtonGroup.js.map

package/commonjs/Button/react-native-hoverable.d.js

@@ -1,2 +1 @@
 "use strict";
-//# sourceMappingURL=react-native-hoverable.d.js.map