@hoddy-ui/next 2.0.3 → 2.0.4

package/dist/index.mjs

@@ -551,7 +551,7 @@ var Avatar_default = Avatar;
 
 // ../src/Components/Button.tsx
 import { Ionicons, MaterialIcons as MaterialIcons2 } from "@expo/vector-icons";
-import React8 from "react";
+import React8, { forwardRef } from "react";
 import { ActivityIndicator, Text as Text2, TouchableOpacity as TouchableOpacity2 } from "react-native";
 import { ScaledSheet as ScaledSheet4, moderateScale as moderateScale2 } from "react-native-size-matters";
 var LinkButton = ({
@@ -628,64 +628,78 @@ var IconButton = ({
     /* @__PURE__ */ React8.createElement(IconComp, { style: { ...styles2.text, ...style }, name: icon, size })
   );
 };
-var Button = ({
-  elevation = 0,
-  onPress = () => {
-  },
-  disabled = false,
-  title,
-  loading,
-  size = "normal",
-  rounded = false,
-  gutterBottom,
-  style = {},
-  fullWidth = false,
-  translucent = false,
-  color = "primary",
-  variant = "contained",
-  start,
-  end
-}) => {
-  const colors2 = useColors();
-  const styles2 = ScaledSheet4.create({
-    con: {
-      flexDirection: "row",
-      alignItems: "center",
-      alignSelf: "flex-start",
-      justifyContent: "center",
-      backgroundColor: variant === "text" || variant === "outlined" ? null : translucent ? translucent === "dark" ? colors2.white[3] + "2" : colors2.black[3] + "2" : loading ? colors2[color].light : disabled ? colors2.white[4] : colors2[color].main,
-      borderRadius: rounded ? 30 : 10,
-      elevation: variant === "text" ? 0 : elevation,
-      paddingVertical: size === "small" ? 8 : size === "large" ? "15@ms" : "13@ms",
-      paddingHorizontal: size === "small" ? "10@ms" : "18@ms",
-      borderColor: colors2[color].main,
-      borderWidth: variant === "outlined" ? 1 : 0,
-      shadowColor: "#000",
-      shadowRadius: elevation,
-      marginBottom: gutterBottom,
-      shadowOffset: {
-        height: elevation / 2,
-        width: 0
+var Button = forwardRef(
+  ({
+    elevation = 0,
+    onPress = () => {
+    },
+    disabled = false,
+    title,
+    loading,
+    size = "normal",
+    rounded = false,
+    gutterBottom,
+    style = {},
+    fullWidth = false,
+    translucent = false,
+    color = "primary",
+    variant = "contained",
+    start,
+    end
+  }, ref) => {
+    const colors2 = useColors();
+    const styles2 = ScaledSheet4.create({
+      con: {
+        flexDirection: "row",
+        alignItems: "center",
+        alignSelf: "flex-start",
+        justifyContent: "center",
+        backgroundColor: variant === "text" || variant === "outlined" ? null : translucent ? translucent === "dark" ? colors2.white[3] + "2" : colors2.black[3] + "2" : loading ? colors2[color].light : disabled ? colors2.white[4] : colors2[color].main,
+        borderRadius: rounded ? 30 : 10,
+        elevation: variant === "text" ? 0 : elevation,
+        paddingVertical: size === "small" ? 8 : size === "large" ? "15@ms" : "13@ms",
+        paddingHorizontal: size === "small" ? "10@ms" : "18@ms",
+        borderColor: colors2[color].main,
+        borderWidth: variant === "outlined" ? 1 : 0,
+        shadowColor: "#000",
+        shadowRadius: elevation,
+        marginBottom: gutterBottom,
+        shadowOffset: {
+          height: elevation / 2,
+          width: 0
+        },
+        shadowOpacity: variant === "text" ? 0 : 0.3,
+        width: fullWidth ? "100%" : null,
+        ...style
       },
-      shadowOpacity: variant === "text" ? 0 : 0.3,
-      width: fullWidth ? "100%" : null,
-      ...style
-    },
-    text: {
-      color: disabled ? variant === "text" || variant === "outlined" ? colors2.black[1] : colors2[color].text : colors2[color][variant === "text" || variant === "outlined" ? "main" : "text"],
-      fontWeight: variant === "outlined" ? "700" : "500",
-      fontSize: size === "small" ? "12@ms" : "16@ms"
-    }
-  });
-  return /* @__PURE__ */ React8.createElement(TouchableOpacity2, { onPress, disabled, style: styles2.con }, start, loading && /* @__PURE__ */ React8.createElement(
-    ActivityIndicator,
-    {
-      size: "small",
-      color: colors2[color].text,
-      style: { marginRight: 10 }
-    }
-  ), /* @__PURE__ */ React8.createElement(Text2, { style: styles2.text }, title), end);
-};
+      text: {
+        color: disabled ? variant === "text" || variant === "outlined" ? colors2.black[1] : colors2[color].text : colors2[color][variant === "text" || variant === "outlined" ? "main" : "text"],
+        fontWeight: variant === "outlined" ? "700" : "500",
+        fontSize: size === "small" ? "12@ms" : "16@ms"
+      }
+    });
+    return /* @__PURE__ */ React8.createElement(
+      TouchableOpacity2,
+      {
+        ref,
+        onPress,
+        disabled,
+        style: styles2.con
+      },
+      start,
+      loading && /* @__PURE__ */ React8.createElement(
+        ActivityIndicator,
+        {
+          size: "small",
+          color: colors2[color].text,
+          style: { marginRight: 10 }
+        }
+      ),
+      /* @__PURE__ */ React8.createElement(Text2, { style: styles2.text }, title),
+      end
+    );
+  }
+);
 var Button_default = Button;
 
 // ../src/Components/Checkbox.tsx